在单个页面上多次刷卡初始化？

问题描述 投票：8回答：2

我正在尝试在单个页面上使用多个旋转木马。而使用者每次只使用其中一个旋转木马。所以我只想一次初始化一个刷卡实例。

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来启动圆盘，而当他悬停.delete时，..但是它不起作用。

jquery swiper
2个回答
3
投票

问题：

根据您提供的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
投票

尝试一下，希望对您有帮助。.：）

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/小提琴

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.