單個頁面上的多個swiper初始化？

Question

我想在單個頁面上使用多個carousals。並且每次用戶只使用一個carousal。所以我只想立即初始化一個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的轉盤，當他徘徊了.delete ..但它不工作。

Answer 1

問題：

根據您提供的Codepen，你的想法樣的工作，但使用的mouseenter和鼠標移開有意想不到的副作用：當鼠標進入滑塊

• 中，滑塊被創建，但是當您向左和向右滑動時，鼠標光標通常會超出滑塊容器的範圍，從而觸發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 
      }); 
  }); 
  

我希望這有助於。

Answer 2

試試這個，希望這有助於.. :)

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