javascript - 使用自定义jQuery在同一页面上有两个轮播的问题

当页面上有一个轮播时，我有一些jQuery效果很好。我需要在同一页面上放置两个轮播，目前无法正常工作。有人可以告诉我如何使其工作吗？

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

最佳答案

您需要进行一些修改以处理Carousel的多个实例：

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