Как правильно инициализировать плагин для нескольких элементов?

Question

[Вячеслав Яшников]

Написал небольшой плагин на jquery, с помощью которого добавляются миниатюры к слайдеру и при клике по ним осуществляется переход на нужный слайд, также при свайпе по слайду, миниатюра активного слайда становится активной , написал, когда слайдер один - все работает, если добавить второй или даже третий слайдер, работает только первый, последующие частично, подскажите пожалуйста в чем ошибка, и верное ли решение делать подобный плагин с помощью .find()? Сам слайдер webflow-slider-with-miniature.webflow.io

;(function($) {
    $.fn.extend({
        HeroSlider: function(options) {
            this.defaults = {};
            var settings = $.extend({}, this.defaults, options);
            return this.each(function() {
    var HeroParent =  $(this);
    HeroParent.find( $('.hero-preview-wrapper') ).find( $('.hero-preview') ).click(function(e) {
			e.preventDefault();
      		HeroParent.find( $('.hero-preview-wrapper') ).find( $('.hero-preview') ).removeClass('active');
			$(this).addClass('active');
     		var index = $(this).index();
            console.log(index);
      		HeroParent.find( $('.hero-nav') ).find( $('.w-round div:eq('+index+')') ).trigger('tap');
		});
    	HeroParent.find( $('.hero-slider') ).on('swipe', function() {
    	 setTimeout(function() {
     	   HeroParent.find( $('.hero-preview-wrapper') ).find( $('.hero-preview') ).removeClass('active');
           var ActiveSlideIndex = HeroParent.find( $('.w-round') ).find( $('.w-active') ).index();
           console.log(ActiveSlideIndex);
           HeroParent.find( $('.hero-preview-wrapper a:eq('+ActiveSlideIndex+')') ).addClass('active');
            }, 100);
	});
                });
        }
    });
})(jQuery);
  $('.hero-slider-wrapper').HeroSlider ();
  $('.hero-slide-wrapper-2').HeroSlider ();
  $('.slider-3').HeroSlider ();

Answer 1

[Ridz]

;(function($) {
    $.fn.extend({
        HeroSlider: function(options) {
            this.defaults = {};
            var settings = $.extend({}, this.defaults, options);
            return this.each(function() {
                var HeroParent = this;
                var preview = $(".hero-preview", this);
                preview.click(function(e) {
                    e.preventDefault();
                    preview.removeClass("active");
                    $(this).addClass("active");
                    var index = preview.index(this);
                    var round = $(".w-slider-dot", HeroParent);
                    round.eq(index).trigger("tap")
                });
               $(".hero-slider", this).on("swipe", function(e, a) {
                    var round = $(".w-slider-dot", HeroParent),
                    index = round.index($(".w-slider-dot.w-active", HeroParent));
                    a.direction == "right" ? index-- : index++;
                    index < 0 && (index = preview.length - 1);
                    index == preview.length && (index = 0);
                    preview.removeClass("active").eq(index).addClass("active")
                })
            })
        }
    })
})(jQuery);

Comments

[Kovalsky]

Вы уж определитесь, где вам нужен индекс, а то он у вас вообще в глобальный объект вылетает

[Ridz]

Никита Полевой, не могли бы уточнить про индекс, где именно это?