Swiper Slider and multiple sliders on the page?

Good Day dear experts!

In General, this situation, I use Swiper slider, and there was a need to make unlimited number of sliders on one page. Everything works but that's not the problem, the initialization is done like this:

$('.sw-product').each(function(){
 var swiper = new Swiper(this, {
 lazyLoading: true, 

 pagination: {
 el: '.slidernav',
 clickable: true,
 bulletClass: 'roundbtn', 
 bulletActiveClass: 'active',
 renderBullet: function (index, className) {
 return '<button class=" ' + className + '"></button>';
},
},

});
});


Of course when I click on any button of the pagination of the turning slide for example swiper-pagination-bullets, I have turned over all slatery immediately. The problem is that if you withdraw a limited amount of sliders will have each slider to write your own class, and several times to duplicate the js.
And that's not good.
How can I do in this case?
June 10th 19 at 15:50
1 answer
June 10th 19 at 15:52
Solution
Try to replace
el: '.slidernav'
something like
el: this.querySelector('.slidernav')

Well, that is - way element of the current pagination of the slider instead of having to specify everything at once for everyone.
Thank you dear man for the idea, so how do you write didn't work, so I did:

el: $(this).parent().find('.slidernav'),

So like so far, so good :) - jordan_Schmi commented on June 10th 19 at 15:55
, parent? Well, of course - how was I supposed to know how you have the elements relative to each other are located. - favian_Torp12 commented on June 10th 19 at 15:58
The order, thank you for not passed : ) - jordan_Schmi commented on June 10th 19 at 16:01

Find more questions by tags HTMLCSSSliderJavaScript