Несколько jcarousels на одной странице выпуска

Question

У меня есть несколько 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 для этого.

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

Использование идентификаторов не очень удобно (рассмотрите CMS, использующую шаблоны для заполнения контента: редактор должен вручную назначить уникальный идентификатор для каждой карусели).

Рассмотрим этот 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');
    }
});

Таким образом, каждая следующая / предыдущая кнопка будет соответствовать присвоенной карусели без несовпадения и без идентификаторов; так что вы можете вставлять и дублировать дважды, 3 раза, любой фрагмент HTML на одну и ту же страницу HTML.

Answer 3

Попробуйте изменить:

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

до

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]