カスタムjQueryを使用して同じページに2つのカルーセルを持つ問題

Question

1つのカルーセルがページにあるときにうまくいくjQueryがあります。同じページに2つのカルーセルが必要ですが、現在は機能していません。誰かが私にそれを働かせる方法を教えてもらえますか？

var Carousel = (function($) { 
    var $carousel = $('.carousel'); 
    var activeItemIndex = 0; 
    var s; 

    return { 
     settings: { 
      delay: 10000, 
      items: $carousel.find('.carousel__item'), 
      totalItems: 0, 
      dots: $carousel.find('.carousel__dots'), 
      dotLinks: $carousel.find('.carousel__dot-link'), 
      timeout: 0, 
     }, 

     init: function(args) { 
      if ($carousel.length) { 
       s = $.extend({}, this.settings, args); 
       s.totalItems = s.items.length; 

       if (s.totalItems > 1) { 
        this.setupDotsData(); 
        this.activate(); 
        this.eventListeners(); 
        $carousel.addClass('active'); 
       } 
      } 
     }, 

     eventListeners: function() { 
      s.dotLinks.on('click', function() { 
       var index = $(this).data('index'); 
       Carousel.stop(); 
       Carousel.show(index); 
      }); 
     }, 

     setupDotsData: function() { 
      s.dots.each(function() { 
       $(this).find('li').each(function(index) { 
        $(this).data('index', index); 
       }); 
      }); 
     }, 

     activate: function() { 
      if (s.totalItems > 1) { 
       Carousel.show(0); 
      } else { 
       s.items.eq(0).addClass('active'); 
      } 
     }, 

     show: function(index) { 
      s.items.removeClass('active'); 
      s.dotLinks.removeClass('active'); 
      s.items.eq(index).addClass('active'); 
      s.dotLinks.filter(':nth-child(' + (index + 1) + ')').addClass('active'); 
      activeItemIndex = index; 

      Carousel.play(); 
     }, 

     next: function(e) { 
      var nextItemIndex = activeItemIndex + 1 >= s.totalItems ? 0 : activeItemIndex + 1; 
      e && e.preventDefault(); 
      Carousel.stop(); 
      Carousel.show(nextItemIndex); 
     }, 

     play: function() { 
      s.timeout = window.setTimeout(Carousel.next, s.delay); 
     }, 

     stop: function() { 
      window.clearTimeout(s.timeout); 
     } 
    }; 
})(jQuery); 

Carousel.init(); 

Example on JSFIDDLE

Answer 1

あなたはCarouselの複数のインスタンスを処理するためのいくつかの変更が必要です（IDを取得し、それを初期化し、各カルーセルをループ）これを試してみてください

https://jsfiddle.net/dmz7wk6f/7/

Answer 2

を：

フィドル：https://jsfiddle.net/4o00o7n6/

$(".carousel").each(function(x){ 

    var carouselId = $(this).attr('id'); 
    var Carousel = (function($) { 
     'use strict'; 
     //var wrap = $('.carousel'); 
     var wrap = $('#' + carouselId); 
     var activeItemIndex = 0; 
     var s; 

     return { 
      settings: { 
       delay: 10000, 
       items: wrap.find('.carousel__item'), 
       totalItems: 0, 
       dots: wrap.find('.carousel__dots'), 
       dotLinks: wrap.find('.carousel__dot-link'), 
       timeout: 0, 
      }, 

      init: function(args) { 
       if (wrap && wrap.length) { 
        s = $.extend({}, this.settings, args); 
        s.totalItems = s.items.length; 

        if (s.totalItems > 1) { 
         this.setupDotsData(); 
         this.activate(); 
         this.eventListeners(); 
         wrap.addClass('active'); 
        } 
       } 
      }, 

      eventListeners: function() { 
       s.dotLinks.on('click', function() { 
        var index = $(this).data('index'); 
        Carousel.stop(); 
        Carousel.show(index); 
       }); 
      }, 

      setupDotsData: function() { 
       s.dots.each(function() { 
        $(this).find('li').each(function(index) { 
         $(this).data('index', index); 
        }); 
       }); 
      }, 

      activate: function() { 
       if (s.totalItems > 1) { 
        Carousel.show(0); 
       } else { 
        s.items.eq(0).addClass('active'); 
       } 
      }, 

      show: function(index) { 
       s.items.removeClass('active'); 
       s.dotLinks.removeClass('active'); 
       s.items.eq(index).addClass('active'); 
       s.dotLinks.filter(':nth-child(' + (index + 1) + ')').addClass('active'); 
       activeItemIndex = index; 

       Carousel.play(); 
      }, 

      next: function(e) { 
       var nextItemIndex = activeItemIndex + 1 >= s.totalItems ? 0 : activeItemIndex + 1; 
       e && e.preventDefault(); 
       Carousel.stop(); 
       Carousel.show(nextItemIndex); 
      }, 

      play: function() { 
       s.timeout = window.setTimeout(Carousel.next, s.delay); 
      }, 

      stop: function() { 
       window.clearTimeout(s.timeout); 
      } 
     }; 
    })(jQuery); 

    Carousel.init(); 

});