I write a small plugin on jquery, with which miniatures are added to the slider and when you click on it, you go to the desired slide, also when swiping along the slide, the thumbnail of the active slide becomes active, wrote when the slider is one — everything works, if you add a second slider, everything breaks, please tell me what is the error, and is it the right decision to make such a plugin using .find ()? To test the performance without a single slider, just comment it out in html code. in the sandbox slider is buggy here is the site itself http://webflow-slider-with-miniature.webflow.io

(function($) { jQuery.fn.HeroSlider = 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(); 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(); HeroParent.find($('.hero-preview-wrapper a:eq(' + ActiveSlideIndex + ')')).addClass('active'); }, 100); }); }; })(jQuery); $('.hero-slider-wrapper').HeroSlider(); //инициализация первого $('.hero-slider-wrapper-2').HeroSlider (); //инициализация второго 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://daks2k3a4ib2z.cloudfront.net/57f748fc37d7eda1401efd00/css/webflow-slider-with-miniature.webflow.0ce7634a0.css" rel="stylesheet" /> <script src="https://daks2k3a4ib2z.cloudfront.net/57f748fc37d7eda1401efd00/js/webflow.49df81509.js"></script> <!--Первый слпайдер начало--> <div class="hero-slider-wrapper"> <div class="hero-slider w-slider" data-animation="slide" data-duration="500" data-infinite="1"> <div class="w-slider-mask"> <div class="hero-slide w-slide" style="transform: translateX(0px); opacity: 1;"> <img sizes="100vw" src="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2.jpg" srcset="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2-p-500x334.jpeg 500w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2-p-800x534.jpeg 800w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2-p-1080x720.jpeg 1080w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2.jpg 1280w"> </div> <div class="hero-slide w-slide" style="transform: translateX(0px); opacity: 1;"> <img sizes="100vw" src="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I.jpg" srcset="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I-p-500x334.jpeg 500w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I-p-800x534.jpeg 800w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I-p-1080x720.jpeg 1080w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I.jpg 1280w"> </div> <div class="hero-slide w-slide" style="transform: translateX(0px); opacity: 1;"> <img class="image" sizes="100vw" src="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI.jpg" srcset="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI-p-500x334.jpeg 500w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI-p-800x534.jpeg 800w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI-p-1080x720.jpeg 1080w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI.jpg 1280w"> </div> </div> <div class="w-slider-arrow-left"> <div class="w-icon-slider-left"></div> </div> <div class="w-slider-arrow-right"> <div class="w-icon-slider-right"></div> </div> <div class="hero-nav w-round w-slider-nav"> <div class="w-slider-dot w-active" data-wf-ignore=""></div> <div class="w-slider-dot" data-wf-ignore=""></div> <div class="w-slider-dot" data-wf-ignore=""></div> </div> </div> <div class="hero-preview-wrapper"> <a class="hero-preview w-inline-block" href="#"> <div>1</div> </a> <a class="hero-preview w-inline-block active" href="#"> <div>2</div> </a> <a class="hero-preview w-inline-block" href="#"> <div>3</div> </a> </div> </div> <!--Первый слайдер конец--> <!--Второй слайдер начало --> <div class="hero-slider-wrapper-2"> <div class="hero-slider w-slider" data-animation="slide" data-duration="500" data-infinite="1"> <div class="w-slider-mask"> <div class="hero-slide w-slide" style="transform: translateX(0px); opacity: 1;"> <img sizes="100vw" src="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2.jpg" srcset="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2-p-500x334.jpeg 500w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2-p-800x534.jpeg 800w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2-p-1080x720.jpeg 1080w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74a96577342964014add1_pIzF19vePJQ-2.jpg 1280w"> </div> <div class="hero-slide w-slide" style="transform: translateX(0px); opacity: 1;"> <img sizes="100vw" src="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I.jpg" srcset="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I-p-500x334.jpeg 500w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I-p-800x534.jpeg 800w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I-p-1080x720.jpeg 1080w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b1c577342964014adf0_q9YDFoetE_I.jpg 1280w"> </div> <div class="hero-slide w-slide" style="transform: translateX(0px); opacity: 1;"> <img class="image" sizes="100vw" src="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI.jpg" srcset="http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI-p-500x334.jpeg 500w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI-p-800x534.jpeg 800w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI-p-1080x720.jpeg 1080w, http://uploads.webflow.com/57f748fc37d7eda1401efd00/57f74b2937d7eda1401f0502_TIQ5UnoTUXI.jpg 1280w"> </div> </div> <div class="w-slider-arrow-left"> <div class="w-icon-slider-left"></div> </div> <div class="w-slider-arrow-right"> <div class="w-icon-slider-right"></div> </div> <div class="hero-nav w-round w-slider-nav"> <div class="w-slider-dot w-active" data-wf-ignore=""></div> <div class="w-slider-dot" data-wf-ignore=""></div> <div class="w-slider-dot" data-wf-ignore=""></div> </div> </div> <div class="hero-preview-wrapper"> <a class="hero-preview w-inline-block" href="#"> <div>1</div> </a> <a class="hero-preview w-inline-block active" href="#"> <div>2</div> </a> <a class="hero-preview w-inline-block" href="#"> <div>3</div> </a> </div> </div> <!--Второй слайдер конец -->

    1 answer 1

    You incorrectly approached the creation of a plugin, you need to use one of the popular patterns that take into account the fact that the plugin can be run more than once for several elements.

    jQuery-plugins patterns

    Here is the easiest:

     ;(function($) { $.fn.extend({ pluginname: function(options) { this.defaults = {}; var settings = $.extend({}, this.defaults, options); return this.each(function() { var $this = $(this); }); } }); })(jQuery);