0

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

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

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

作者提出以下建议：

如果您确实想滚动大小不等的元素，请尝试将它们放在容器 div 中，然后在其上初始化 simpleScroll（请注意，此 hack 本质上会使滚动的元素数量翻倍！）

该列表似乎已经在容器 div 中：

div.simply-scroll-container

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

尽管对我来说模棱两可，但这里也存在类似的线程。任何帮助是极大的赞赏。

4

4 回答 4

0

这是第 2 版（即将推出！）通过自动包装您尝试滚动的元素来解决的常见问题。现在手动进行。

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

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

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

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

于 2011-09-09T10:26:03.760 回答
0

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; }

于 2011-04-11T14:55:18.767 回答
0

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

  • 包装<ul>成自己的<div id="scroller">
  • 从CSS 中的元素中删除固定width属性.simply-scroll .simply-scroll-list li
  • 根据需要添加padding到此元素。

在 Firefox、Chrome 和 IE 中工作。

于 2013-03-14T16:29:56.380 回答
0

不知道对你有没有帮助。自问题编写以来已超过 2 年。

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

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

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

});

于 2014-01-23T18:42:45.307 回答