在单个页面上进行多个swiper初始化？

时间：2016-02-29 14:54:46

标签： jquery swiper

我试图在一个页面上使用多个carousals。每次用户只使用一个转盘时。所以我想一次初始化一个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'
    });
});

所以基本逻辑是，每当用户在carousal中盘旋时，使用相应的className启动carousal，当他徘徊时.delete it ..但它不起作用。

2 个答案:

答案 0 :(得分：2)

问题：

根据您提供的Codepen，您会想到一些工作，但使用mouseenter和mouseout会产生意想不到的副作用：

  • 当鼠标进入滑块时，会创建滑块但是当您向左和向右滑动时，鼠标光标经常会移到滑块容器之外，从而触发mouseout事件并销毁滑块。

  • 由于不断破坏和重新创建滑块，它会不断将滑块重置为第一张图像（因为滑块会重置为初始状态）。

这使得滑块非常难用。

可能的解决方案：

  • 我不知道你当时只使用一个滑块的原因，但可能值得考虑不断破坏和重新创建滑块而不是简单地使用多个滑块的性能。 我建议你向滑块插件的作者询问每种可能性的表现。

  • 如果您有很多滑块，而不是使用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
    });
});

我希望这会有所帮助。

答案 1 :(得分：1)

试试这个，希望这会有所帮助.. :)

＆＃13;
＆＃13; 
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);
  });
})
＆＃13; 
.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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

https://jsfiddle.net/uhr7uha0/2/小提琴

相关问题
最新问题