Question

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

您可以查看滚动内容here。

如何获得宽度不同的列表项？

作者建议如下：

如果你想滚动不相等的大小元素尝试将它们放入容器div，然后初始化 simplyScroll on that（请注意这一点黑客攻击基本上会翻倍滚动的元素数量！）

列表已经显示在容器div中：

div.simply-scroll-container

作者的意思是＆＃34;初始化＆＃34;在容器div？

类似的线程存在here虽然对我来说不明确。非常感谢任何帮助。

Answer 1

li的宽度在简单滚动css文件中设置，因此如果您希望使用不同的大小，只需删除width属性：

在： .simply-scroll .simply-scroll-list li { float: left; /*width: 290px;*/ width: 290px; /*height: 200px;*/ height: 180px; }

在： .simply-scroll .simply-scroll-list li { float: left; /*height: 200px;*/ height: 180px; }

Answer 2

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

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

<ul id="scroller"> <li></li> <li></li> etc... </ul>

将它包装在另一个div中，这样你只需滚动一个。

<div id="scroller"><ul> <li></li> <li></li> etc... </ul> </div>

Answer 3

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

将<ul>包装到自己的<div id="scroller">
从CSS

width

.simply-scroll .simply-scroll-list li

根据需要将padding添加到此元素。

在Firefox，Chrome和IE中工作。

Answer 4

我不知道它对你有帮助。问题已经过去2年了。

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

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

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

}）;

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

4 个答案: