单个页面上的多个滑动器初始化？
Multiple swiper initialization on a single page?
我正在尝试在单个页面上使用多个轮播。每次用户只使用其中一个carousal。所以我只想一次初始化一个滑动器实例。
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'
});
});
所以基本逻辑是，每当用户悬停在轮播中时，使用相应的类名启动轮播，当他悬停时删除它..但它不起作用。
问题：
根据您提供的 Codepen，您的想法是可行的，但使用 mouseenter 和 mouseout 会产生意想不到的副作用：
当鼠标进入slider时，slider被创建，但是当你左右滑动时，鼠标光标经常会跳出slider容器，从而触发mouseout事件并销毁slider。
由于不断销毁和重新创建滑块，它不断将滑块重置为它们的第一个图像（因为滑块被重置为其初始状态）。
这使得滑块的使用变得非常困难。
可能的解决方案：
我不知道您一次只能使用一个滑块的原因，但可能值得考虑不断销毁和重新创建滑块而不是简单地使用多个滑块的性能。
我建议你向滑块插件的作者询问每种可能性的性能
如果你有很多滑块，而不是使用 mouseenter 或 mouseout，你可以监听滚动事件并检查哪些滑块可见，哪些不可见。因此，您可以根据滑块的可见性创建和销毁滑块，而不会产生我之前提到的副作用。
您也可以只对每个滑块初始化一次，这样就可以去掉 mouseout 侦听器。因此，在 mouseenter 事件中，您可以检查滑块是否已经初始化（通过在第一次添加 class 或检查滑块插件给容器的任何 class）。
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
});
});
希望对您有所帮助。
试试这个，希望对您有所帮助..:)
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/ 对于 fiddle
我正在尝试在单个页面上使用多个轮播。每次用户只使用其中一个carousal。所以我只想一次初始化一个滑动器实例。
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'
});
});
所以基本逻辑是，每当用户悬停在轮播中时，使用相应的类名启动轮播，当他悬停时删除它..但它不起作用。
问题：
根据您提供的 Codepen，您的想法是可行的，但使用 mouseenter 和 mouseout 会产生意想不到的副作用：
当鼠标进入slider时，slider被创建，但是当你左右滑动时，鼠标光标经常会跳出slider容器，从而触发mouseout事件并销毁slider。
由于不断销毁和重新创建滑块，它不断将滑块重置为它们的第一个图像（因为滑块被重置为其初始状态）。
这使得滑块的使用变得非常困难。
可能的解决方案：
我不知道您一次只能使用一个滑块的原因，但可能值得考虑不断销毁和重新创建滑块而不是简单地使用多个滑块的性能。 我建议你向滑块插件的作者询问每种可能性的性能
如果你有很多滑块，而不是使用 mouseenter 或 mouseout，你可以监听滚动事件并检查哪些滑块可见，哪些不可见。因此，您可以根据滑块的可见性创建和销毁滑块，而不会产生我之前提到的副作用。
您也可以只对每个滑块初始化一次，这样就可以去掉 mouseout 侦听器。因此，在 mouseenter 事件中，您可以检查滑块是否已经初始化（通过在第一次添加 class 或检查滑块插件给容器的任何 class）。
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 }); });
希望对您有所帮助。
试试这个，希望对您有所帮助..:)
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/ 对于 fiddle