在一个页面上需要多个弹性滑动图像查看器
我找到了这个漂亮的图像滑块: http : //tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
由于我正在使用这种设计开发一个活动网站: 我的网页设计 ,我想在一个页面上添加多个(3)滑块。 我是jquery的新手,因此很难编辑jquery代码,因此它可以识别html上的多个列表以呈现轮播。
这里的脚本:
$( '#carousel' ).elastislide( {minItems : 2} );
有人请帮帮我!!!!
我使用的是class而不是id,但仍然没有。 2滑块不起作用。 但是,使用每个jquery,它工作:
jQuery('.carousel').each(function(){ jQuery(this).elastislide( { minItems : 2 }); })
通过使用不同的ID并分别调用每个ID找到解决方案,如下所示:
javascript代码
只需使用class而不是id,如下所示
javascript代码
像这样使用短的
如果你想拥有2个不同的滑块并拥有自己的导航,但如果你想拥有一个导航并控制两个滑块,这里有一个快速的代码片段可以帮助你解决它。 使用display:none隐藏弹性滑动默认按钮
.elastislide-prev{ display: none; } .elastislide-next{ display: none; }
添加您自己的自定义导航:
在弹性滑动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个滑块,创建一个非常好的网格轮播效果。