在一个页面上需要多个弹性滑动图像查看器

我找到了这个漂亮的图像滑块： http ： //tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

由于我正在使用这种设计开发一个活动网站： 我的网页设计 ，我想在一个页面上添加多个（3）滑块。 我是jquery的新手，因此很难编辑jquery代码，因此它可以识别html上的多个列表以呈现轮播。

这里的脚本：

   $( '#carousel' ).elastislide( {minItems : 2} );  

有人请帮帮我!!!!

Answer 1

我使用的是class而不是id，但仍然没有。 2滑块不起作用。 但是，使用每个jquery，它工作：

 jQuery('.carousel').each(function(){ jQuery(this).elastislide( { minItems : 2 }); }) 

Answer 2

通过使用不同的ID并分别调用每个ID找到解决方案，如下所示：

javascript代码

Answer 3

只需使用class而不是id，如下所示

javascript代码

像这样使用短的

Answer 4

如果你想拥有2个不同的滑块并拥有自己的导航，但如果你想拥有一个导航并控制两个滑块，这里有一个快速的代码片段可以帮助你解决它。 使用display：none隐藏弹性滑动默认按钮

 .elastislide-prev{ display: none; } .elastislide-next{ display: none; } 

添加您自己的自定义导航：

 
 Previous Next  

在弹性滑动js：

将以下内容添加到_addControls：function（）{

 var xyz = $('.fixed-bar'); this.$navPrev = xyz.find( 'span.elastislide-newleft' ).on( 'mousedown.elastislide', function( event ) { self._slide( 'prev' ); return false; } ); this.$navNext = xyz.find( 'span.elastislide-newright' ).on( 'mousedown.elastislide', function( event ) { self._slide( 'next' ); return false; } ); 

这将帮助您一键滑动2个滑块，创建一个非常好的网格轮播效果。