在一页问题上有多个jcarousels

我在页面上有一些jcarousels，他们通过一个模块成长..所以我们不知道会有多少。 问题是，当我点击一个Carousel“Next”和“Previous”控件时，所有轮播都会同时更改。 之所以发生这种情况，是因为我在java脚本中添加了一个控件，如下所述

if(jQuery().jCarouselLite) { var galleryPane=jQuery('.galleryCon'); galleryPane.append (' 
' ); jQuery("#mod_Pictures .gallery .galleyWrap") .jCarouselLite( { btnNext: ".jcarousel-next", btnPrev: ".jcarousel-prev", visible: 3, circular: false, auto:3000, speed:1000, scroll:1 } ); } 

所以同一个类被附加到所有轮播控件。 当我点击一个时，所有的轮播都会发生变化。 我怎样才能为他们添加不同的课程？ 我需要一个jQuery解决方案。

Answer 1

您需要为您的图库提供唯一标识符，以便插件知道哪个jcarousel-prev / next使用。 它可以像gallery1，gallery2，gallery3等一样简单……然后你可以选择“＃gallery1 .jcarousel-next”来推进第一个旋转木马，而不会影响其他旋转木马。

 if(jQuery().jCarouselLite) { jQuery('.galleryCon').append('
'); jQuery("#mod_Pictures .gallery .galleyWrap").each(function () { var $this = $(this); var galleryid = "#" + $this.closest(".gallery").attr("id"); $this.jCarouselLite({ btnNext: galleryid + " .jcarousel-next", btnPrev: galleryid + " .jcarousel-prev", visible: 3, circular: false, auto:3000, speed:1000, scroll:1 }); }); } 

Answer 2

尝试改变：

 btnNext: ".jcarousel-next", btnPrev: ".jcarousel-prev", 

至

 btnNext: this + " .jcarousel-next", btnPrev: this + " .jcarousel-prev", 

Answer 3

使用ID并不方便（考虑使用模板填充内容的CMS：编辑器应手动为每个轮播分配唯一的ID）。

请考虑以下HTML代码段：

 
 
 
single slide content
 
single slide content
 
single slide content
 
...
 
 
 < > 

而这个jQuery代码：

 var visibleItems = 2; var isCircular = false; $('div.carousel').each(function(index){// the 'index' param identifies each iteration var $this = $(this); // activate carousel only if needed if ( $this.children('ul').children('li').length > visibleItems ) { if ( !isCircular ) { $this.nextAll('button.prev').addClass('disabled'); $this.nextAll('button.next').removeClass('disabled'); } else { $this.nextAll('button').removeClass('disabled'); } $this.jCarouselLite({ visible: visibleItems, circular: isCircular, // jCarouselLite needs a CSS selector, not a jQuery object (that's why here you cannot use $(this).nextAll() ) btnNext: ".carousel:eq(" + index + ") ~ .next", btnPrev: ".carousel:eq(" + index + ") ~ .prev" }); } else { $this.nextAll('button').addClass('disabled'); } }); 

这样每个next / prev按钮都会匹配适当的轮播，没有不匹配和没有ID; 因此，您可以自由地将HTML代码段中的两次，三次，无论如何插入和复制到同一HTML页面中。

Answer 4

   
 
 
 
 
 
 
 
 
 
 
 
 
 ‹ ›   
 
 
 
 
 
 
 
 
 
 
 
 
 ‹ ›  (function($) { $(function() { var jcarousel = $('.jcarousel'); jcarousel .on('jcarousel:reload jcarousel:create', function () { var carousel = $(this), width = carousel.innerWidth(); if (width >= 600) { width = width / 5; } else if (width >= 350) { width = width / 2; } carousel.jcarousel('items').css('width', Math.ceil(width) + 'px'); }) .jcarousel({ wrap: 'circular' }); $('.jcarousel-control-prev') .jcarouselControl({ target: '-=1' }); $('.jcarousel-control-next') .jcarouselControl({ target: '+=1' }); $('.jcarousel-pagination') .on('jcarouselpagination:active', 'a', function() { $(this).addClass('active'); }) .on('jcarouselpagination:inactive', 'a', function() { $(this).removeClass('active'); }) .on('click', function(e) { e.preventDefault(); }) .jcarouselPagination({ perPage: 1, item: function(page) { return '' + page + ''; } }); }); //For second slider $(function() { $('#second .jcarousel').jcarousel(); $('#second .jcarousel-control-prev') .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .jcarouselControl({ target: '-=1' }); $('#second .jcarousel-control-next') .on('jcarouselcontrol:active', function() { $(this).removeClass('inactive'); }) .on('jcarouselcontrol:inactive', function() { $(this).addClass('inactive'); }) .jcarouselControl({ target: '+=1' }); $('#second .jcarousel-pagination') .on('jcarouselpagination:active', 'a', function() { $(this).addClass('active'); }) .on('jcarouselpagination:inactive', 'a', function() { $(this).removeClass('active'); }) .jcarouselPagination(); //second slider with auto scroll from left to Right $('#second').jcarouselAutoscroll({ target: '-=1' }); }); //Similar way we can add third slider. })(jQuery); For more details on [http://sorgalla.com/jcarousel/][1]