Multiple jcarousels on one page issue

Question

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.

Answer 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
        });
    });
}  

Answer 2

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.

Answer 3

Try changing:

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

to

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

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">&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]