如何在 simpleScroll 中实现不等宽的图像元素？

Question

我正在使用 simplyScroll v1 水平滚动不同宽度的图像，但列表项包含图像具有固定宽度。

您可以在此处查看滚动内容。

如何实现具有不同宽度的列表项？

作者建议如下：

如果您确实想要滚动不等大小 元素尝试将它们放入 容器div，然后初始化 只需滚动即可（请注意，这 hack 基本上会增加一倍 滚动的元素数量！）

列表已经出现在容器 div 内：

div.simply-scroll-container

作者在容器 div 上“初始化”是什么意思？

这里存在类似的线程，尽管它对我来说不明确。非常感谢任何帮助。

Answer 1

li 的宽度是在 simple-scroll css 文件中设置的，因此如果您希望使用不同的大小，您可以简单地删除 width 属性：

之前：
.simply-scroll .simply-scroll-list li {
浮动：向左；
/*宽度:290px;*/ 宽度:290px;
/*高度:200px;*/高度:180px;
之后

：
.simply-scroll .simply-scroll-list li {
浮动：向左；
/*高度:200px;*/高度:180px;
}

Answer 2

这是一个常见问题，版本 2（即将发布！）通过自动包装您尝试滚动的元素来修复。现在手动进行。

如果您有这个不等宽度/高度元素的列表

ETC...

将其包装在另一个 div 中，这样您只需滚动一个即可。

;

ETC...

Answer 3

我通过结合已经提供的两个答案来实现这一点；

• 将
  包装到其自己的
  中，
• 从 中删除固定的 width 属性CSS 中的 .simply-scroll .simply-scroll-list li 元素
• 根据需要向该元素添加 padding 。

在 Firefox、Chrome 和 IE 中工作。

Answer 4

我不知道对你是否有帮助。问题写完已经两年多了。

这是li内每个图像不同宽度的解决方案

$( window ).load(function() {
  $('#scroller li img').each(function(){
      var widthThis = $(this).width();

      $(this).parent().css({
        width : widthThis
      })
   });
$("#scroller").simplyScroll({
    pauseOnHover: false
});

});