我在页面上有一些jcarousels，他们通过一个模块长大..所以我们不知道会有多少。问题是当我点击一个Carousel“Next”和“Previous”控制所有轮播同时改变时。之所以会发生这种情况，是因为我在java脚本中附加了一个控件，如bellow
if(jQuery().jCarouselLite)
{
var galleryPane=jQuery('.galleryCon');
galleryPane.append
('
<div class="jcarousel-prev"></div><div class="jcarousel-next"></div>'
);
jQuery("#mod_Pictures .gallery .galleyWrap")
.jCarouselLite(
{
btnNext: ".jcarousel-next",
btnPrev: ".jcarousel-prev",
visible: 3,
circular: false,
auto:3000,
speed:1000,
scroll:1
}
);
}
所以同一个类会被附加到所有轮播控件。当我点击一个时，所有的轮播都会改变。我怎样才能为他们添加不同的课程？ 我需要一个jQuery解决方案。
答案 0 :(得分：5)
您需要为您的图库提供唯一标识符，以便插件知道哪个jcarousel-prev / next使用。它可以像gallery1，gallery2，gallery3等一样简单......然后你可以选择“＃gallery1 .jcarousel-next”来推进第一个旋转木马，而不会影响其他旋转木马。
if(jQuery().jCarouselLite) {
jQuery('.galleryCon').append('<div class="jcarousel-prev"></div><div class="jcarousel-next"></div>');
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
});
});
}
答案 1 :(得分：1)
尝试更改：
btnNext: ".jcarousel-next",
btnPrev: ".jcarousel-prev",
到
btnNext: this + " .jcarousel-next",
btnPrev: this + " .jcarousel-prev",
答案 2 :(得分：1)
使用ID并不方便（考虑使用模板填充内容的CMS：编辑器应手动为每个轮播分配唯一的ID）。
考虑这个 HTML 代码段：
<div class="carousel">
<ul>
<li>single slide content</li>
<li>single slide content</li>
<li>single slide content</li>
<li>...</li>
</ul>
</div>
<button class="prev"><</button>
<button class="next">></button>
这个 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页面中。
答案 3 :(得分：0)
<!-- for first Slider -->
<div class="jcarousel">
<ul>
<li><a href="#"> <img alt=" " src="assets/images/news-1.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="assets/images/news-2.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-3.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-4.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-1.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-1.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-4.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-1.jpg" alt=""></a></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
</div>
<!-- for second slider -->
<div class="jcarousel" id="second">
<ul>
<li><a href="#"> <img alt=" " src="assets/images/news-1.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="assets/images/news-2.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-3.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-4.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-1.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-1.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-4.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/images/news-1.jpg" alt=""></a></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
</div>
(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 '<a href="#' + page + '">' + page + '</a>';
}
});
});
//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]