如何在simplyScroll中实现不相等宽度的图像元素

Question

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

您可以在这里查看滚动内容。

如何实现不同宽度的列表项?

作者建议如下:

如果你想滚动大小不等元素试着把它们放在容器div，然后初始化simplyScroll在那(注意这Hack将会加倍滚动的元素数量!)

列表已经出现在一个容器div:

div.simply-scroll-container

作者在容器div上"初始化"是什么意思?

这里存在一个类似的线程，尽管它对我来说是模糊的。如有任何帮助，不胜感激。

Answer 1

li的宽度是在simple -scroll 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">
• 移除.simply-scroll .simply-scroll-list li元素的固定width属性
• 根据需要添加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
});

});