Инициализация нескольких swiper на одной странице?

Question

Инициализация нескольких swiper на одной странице?

Я пытаюсь использовать несколько каруселей на одной странице. и каждый раз пользователь использует только одну из каруселей. поэтому я хочу инициализировать только один экземпляр swiper сразу.

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'
    });
});

поэтому основная логика, когда парит пользователей в пьянке, инициировать пьянка, используя, что соответствующим className, и когда он парит вне .удалить его.. но это не работает.

6

jquery swiper

автор: Cœur

2 ответов

автор: kerwan · Accepted Answer · 2016-03-03 16:02:46

:

основываясь на предоставленном вами Codepen, вы представляете себе работу, но использование mouseenter и mouseout имеет неожиданный побочный эффект:

когда мышь входит в ползунок, ползунок создается, но когда вы скользите влево и вправо, курсор мыши часто выходит за пределы контейнера ползунка, который запускает событие mouseout и уничтожает ползунок.
из-за постоянного разрушения и воссоздавая ползунки, он продолжает сбрасывать ползунки на их первое изображение (потому что ползунок сбрасывается в исходное состояние).

это делает использование слайдера очень сложным.

возможные решения :

Я не знаю причин, по которым вам нужно использовать только один слайдер в то время, но, возможно, стоит рассмотреть производительность постоянного уничтожения и воссоздания слайдеров вместо простого использования нескольких ползуны. Я предлагаю вам спросить автора плагина slider о производительности каждой возможности.
Если у вас много ползунков, вместо использования mouseenter или mouseout, вы можете прослушать события прокрутки и проверить, какие ползунки видны, а какие нет. Таким образом, вы можете создавать и уничтожать слайдеры на основе их видимости, не имея побочного эффекта, о котором я упоминал ранее.
вы также можете инициализировать только каждый слайдер один раз, так что вы можете избавиться от прослушивателя mouseout. Таким образом, в событии mouseenter вы можете проверить, был ли слайдер уже инициализирован (добавив класс в первый раз или проверив любой класс, заданный плагином слайдера в контейнер).
```
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
    });
});
```

надеюсь, это поможет.

автор: mike tracker · Accepted Answer · 2016-03-10 07:18:16

попробуйте это, надеюсь, это поможет..:)

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/ для скрипки