2

我在一个页面上有一些 jcarousels，它们是由一个模块长大的。所以我们不知道会有多少。问题是当我单击一个轮播“下一个”和“上一个”控件时，所有轮播同时更改。发生这种情况是因为我从 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 解决方案。

4

4 回答 4

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
        });
    });
}
于 2011-08-25T13:02:59.847 回答
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');
    }
});

这样，每个下一个/上一个按钮都将匹配相应的轮播，不会出现不匹配且没有 ID；因此，您可以自由地将 HTML 片段插入和复制两次、3 次（无论如何）到同一个 HTML 页面中。

于 2013-12-10T14:55:46.947 回答
1

尝试改变：

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

至

btnNext: this + " .jcarousel-next",
btnPrev: this + " .jcarousel-prev",
于 2011-08-25T12:45:31.920 回答
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">&lsaquo;</a>
                  <a href="#" class="jcarousel-control-next">&rsaquo;</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">&lsaquo;</a>
                  <a href="#" class="jcarousel-control-next">&rsaquo;</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]
于 2016-01-19T13:22:29.070 回答