一页上有多个 jcarousel 问题

Question

我在一个页面上有一些 jcarousel，它们是通过一个模块成长的。所以我们无法知道会有多少个。问题是，当我单击一个轮播“下一个”和“上一个”时，所有轮播都会同时更改。发生这种情况是因为我已经从 java 脚本中附加了控件，如下所示，

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 解决方案。

Answer 1

您需要为您的画廊提供唯一的标识符，以便插件知道要使用哪个 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
        });
    });
}  

Answer 2

：

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

尝试改变

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

Answer 3

使用 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');
    }
});

这样每个下一个/上一个按钮都会匹配适当的轮播，不会不匹配，也没有 ID；因此，您可以自由地将 HTML 代码段插入和复制两次、3 次或任何其他内容到同一个 HTML 页面中。

Answer 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]