问题描述
我在页面上有一些jcarousels,他们通过一个模块长大..所以我们不知道会有多少。问题是当我点击一个CarouselNext和Previous控制所有轮播同时改变时。之所以发生这种情况,是因为我在java脚本中附加了一个控件,如下所示
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
}
);
}
因此同一个类会附加到所有轮播控件。当我点击一个时,所有的轮播都会改变。我怎样才能为他们添加不同的课程?
我需要一个jQuery解决方案。
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.
推荐答案
你需要为你的画廊提供唯一的标识符,以便插件知道哪个jcarousel-prev / next使用。它可以像gallery1,gallery2,gallery3等一样简单......然后你可以选择#gallery1 .jcarousel-next来推进第一个轮播,而不会影响其他轮播。
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
});
});
}
这篇关于在一页问题上有多个jcarousels的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!