Multiple swiper initialization on a single page?

Problem :

Based on the Codepen you provide, you idea kind of work but using mouseenter and mouseout has an unexpected side effect :

• When the mouse enters the slider, the slider is created but when you slide left and right, the mouse cursor often goes outside the slider container which triggers the mouseout event and destroys the slider.

• because of the constant destroying and recreating sliders, it keeps resetting the sliders to their first image (because the slider gets resetted to its initial state).

This makes using the slider really hard.

Possible solutions :

• I don't know the reasons you have to only use one slider at the time but it might be worth considering the performance of constantly destroying and recreating sliders instead of simply using multiple sliders. I suggest you to ask the author of the slider plugin about the performance of each possibility.

• If you have a lot of sliders, instead of using mouseenter or mouseout, you could listen to the scroll events and check which sliders are visible and which are not. So you could create and destroy sliders based on their visibility without having the side effect i mentionned earlier.

• You can also initialize each slider only once, so you can get rid of the mouseout listener. So on the mouseenter event you can check if the slider has already been initialized (by adding a class on the first time or by checking any class given by the slider plugin to your container).

  var mySwiper;
  $('.swiper-container').on( "mouseenter", function (e) {
      if($(this).hasClass('has-slider')) {
          return;
      }
  
      $(this).attr("data-id");
      $(this).addClass('has-slider');
      mySwiper = new Swiper ('.' + $(this).attr("data-id"), {
          loop: true,
         pagination: '.swiper-pagination',
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          scrollbar: '.swiper-scrollbar',
          preventClicksPropagation: false
      });
  });
  

I hope this helps.