问题
I have some jcarousels on a page, and they grow up by a module.. So we can`t tell how many there will be. The problem is when i click on a one Carousel "Next" and "Previous" controls all the carousels change at same time. It happens because i have append a the control's from the java script like 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
}
);
}
So the same class gets append to all carousels controls. When I click one all the carousels get changed. How can I append different classes to them? I need a jQuery solution for this.
回答1:
You'll need to give your galleries unique identifiers so the plugin knows which jcarousel-prev/next to use. It can be as simple as gallery1, gallery2, gallery3, etc... Then you can select "#gallery1 .jcarousel-next" to advance the first carousel without affecting up the others.
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
});
});
}
回答2:
Try changing:
btnNext: ".jcarousel-next",
btnPrev: ".jcarousel-prev",
to
btnNext: this + " .jcarousel-next",
btnPrev: this + " .jcarousel-prev",
回答3:
Using IDs is not that convenient (consider a CMS using templates to populate content: the editor should assign by hand a unique ID for every carousel).
Consider this HTML snippet:
<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>
And this jQuery code:
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');
}
});
This way every next/prev button will match the appropriated carousel, without mismatching and without IDs; so you are free to insert and duplicate twice, 3 times, whatever, the HTML snippet into the same HTML page.
回答4:
<!-- 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]
来源：https://stackoverflow.com/questions/7189627/multiple-jcarousels-on-one-page-issue