Multiple swiper initialization on a single page?

Question

I am trying to use multiple carousals on a single page. and each time the user uses only one of the carousal. so i want to initialise only one of the swiper instance at once.

http://codepen.io/pruthvip/pen/ZWYbby

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

So basic logic is, whenever the user hovers in the carousal, initiate the carousal using that the respective className, and when he hovers out .delete it.. but it's not working.

Answer 1

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.

Answer 2

Try this, hope this helps..:)

var mySwiper;
$('.swiper-container').each(function() {
  $(this).on("mouseenter", function(e) {
    $(this).find('.swiper-pagination,.swiper-button-next,.swiper-button-prev,.swiper-scrollbar').addClass('activeSwipe');

    $(this).attr("data-id");
    mySwiper = new Swiper('.' + $(this).attr("data-id"), {
      loop: true,
      speed: 400,
      pagination: '.swiper-pagination.activeSwipe',
      nextButton: '.swiper-button-next.activeSwipe',
      prevButton: '.swiper-button-prev.activeSwipe',
      scrollbar: '.swiper-scrollbar.activeSwipe',
      preventClicksPropagation: false
    });
  });

  $(this).on("mouseleave", function(e) {
    $(this).find('.swiper-pagination,.swiper-button-next,.swiper-button-prev,.swiper-scrollbar').removeClass('activeSwipe');
    mySwiper.destroy(true, true);
  });
})

.s1 {
  width: 600px;
  height: 300px;
}
.s2 {
  width: 800px;
  height: 400px;
}
/* Arrows */

.swiper-button-prev2,
.swiper-button-next2 {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  -moz-background-size: 27px 44px;
  -webkit-background-size: 27px 44px;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev2.swiper-button-disabled,
.swiper-button-next2.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev2,
.swiper-container-rtl .swiper-button-next2 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}
.swiper-button-prev2.swiper-button-black,
.swiper-container-rtl .swiper-button-next2.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev2.swiper-button-white,
.swiper-container-rtl .swiper-button-next2.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next2,
.swiper-container-rtl .swiper-button-prev2 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}
.swiper-button-next2.swiper-button-black,
.swiper-container-rtl .swiper-button-prev2.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next2.swiper-button-white,
.swiper-container-rtl .swiper-button-prev2.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */

.swiper-pagination2 {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination2.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-container-vertical > .swiper-pagination2 {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  -moz-transform: translate3d(0px, -50%, 0);
  -o-transform: translate(0px, -50%);
  -ms-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination2 .swiper-pagination-bullet {
  margin: 5px 0;
  display: block;
}
.swiper-container-horizontal > .swiper-pagination2 {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.swiper-container-horizontal > .swiper-pagination2 .swiper-pagination-bullet {
  margin: 0 5px;
}
/* Scrollbar */

.swiper-scrollbar2 {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar2 {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar2 {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.8/css/swiper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.8/js/swiper.min.js"></script>
<div class="swiper-container s1" data-id="s1">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <img src="http://lorempixel.com/g/600/300/city">
    </div>
    <div class="swiper-slide">
      <img src="http://lorempixel.com/g/600/300/people">
    </div>
    <div class="swiper-slide">
      <img src="http://lorempixel.com/g/600/300/transport">
    </div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
<br/>
<div class="swiper-container s2" data-id="s2">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <img src="http://lorempixel.com/g/800/400/city">
    </div>
    <div class="swiper-slide">
      <img src="http://lorempixel.com/g/800/400/people">
    </div>
    <div class="swiper-slide">
      <img src="http://lorempixel.com/g/800/400/transport">
    </div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

https://jsfiddle.net/uhr7uha0/2/ for fiddle