在一页问题上有多个jcarousels [英] Multiple jcarousels on one page issue

问题描述

我在页面上有一些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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！