Jquery 在单个页面上进行多个刷卡器初始化？

我试图在一个页面上使用多个carousals。而且每次用户只使用一个carousal。所以我想一次只初始化一个swiper实例

$（'.swiper container'）。打开（“鼠标指针”，函数（e）{
$（this.attr（“数据id”）；
mySwiper=newswiper（'.'+$（this）.attr（“数据id”）{
循环：对，
分页：'.swiper分页'，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
滚动条：'.swiper滚动条'
});
});

---

所以基本逻辑是，每当用户悬停在carousal中时，使用相应的类名启动carousal，当用户悬停在out时，删除它。。但它不起作用。

问题：

根据您提供的Codepen，您可以选择一种工作方式，但使用mouseenter和mouseout会产生意想不到的副作用：

• 当鼠标进入滑块时，将创建滑块，但当您向左和向右滑动时，鼠标光标通常会超出滑块容器，从而触发mouseout事件并销毁滑块

• 由于不断销毁和重新创建滑块，它会不断将滑块重置为其第一个图像（因为滑块重置为其初始状态）

这使得使用滑块非常困难

可能的解决方案：

• 我不知道为什么你一次只能使用一个滑块，但它可能值得考虑不断破坏和重新创建滑块的性能，而不是简单地使用多个滑块。 我建议您向slider插件的作者询问每种可能性的性能

• 如果您有很多滑块，而不是使用mouseenter或mouseout，您可以收听滚动事件并检查哪些滑块可见，哪些不可见。因此，您可以根据滑块的可见性创建和销毁滑块，而不会产生我前面提到的副作用

• 您还可以只初始化每个滑块一次，这样就可以摆脱mouseout侦听器。因此，在mouseenter事件中，您可以检查滑块是否已经初始化（通过第一次添加类，或者通过检查滑块插件提供给容器的任何类）

---

我希望这有帮助。

试试这个，希望这有帮助：）

var；
$（'.swiper container'）。每个（函数（）{
$（this）.on（“mouseenter”，函数（e）{
$（this）.find（'.swiper分页，.swiper按钮下一步，.swiper按钮上一步，.swiper滚动条'）.addClass（'activeSwipe'）；
$（this.attr（“数据id”）；
mySwiper=newswiper（'.'+$（this）.attr（“数据id”）{
循环：对，
速度:400,，
分页：'.swiper分页.activeSwipe'，
下一个按钮：'.swiper按钮下一个.activeSwipe'，
prevButton:“.swiper按钮prev.activeSwipe”，
滚动条：'.swiper滚动条.activeSwipe'，
防止单击复制：false
});
});
$（this）.on（“mouseleave”，函数（e）{
$（this）.find（'.swiper分页，.swiper按钮下一步，.swiper按钮上一步，.swiper滚动条'）.removeClass（'activeSwipe'）；
毁灭（真的，真的）；
});
})

.s1{
宽度：600px；
高度：300px；
}
.s2{
宽度：800px；
高度：400px；
}
/*箭*/
.swiper-button-prev2，
.swiper-button-next2{
位置：绝对位置；
最高：50%；
宽度：27px；
高度：44px；
利润上限：-22px；
z指数：10；
光标：指针；
-moz背景大小：27px44px；
-webkit背景尺寸：27px 44px；
背景尺寸：27px44px；
背景位置：中心；
背景重复：无重复；
}
.swiper-button-prev2.swiper-button-disabled，
.swiper-button-next2.swiper-button-disabled{
不透明度：0.35；
光标：自动；
指针事件：无；
}
.swiper-button-prev2，
.swiper容器rtl.swiper-button-next2{
背景图像：url（“数据：图像/svg+xml；字符集=utf-8，%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2FSSVG'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22L0%2C22L0%2C22L0%2C22z'%20fill%3D230072F%3E”%3SVG”）；
左：10px；
右：自动；
}
.swiper-button-prev2.swiper-button-black，
.swiper容器rtl.swiper-button-next2.swiper-button-black{
背景图像：url（“数据：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%2C22L0%2C22z'%3f%3f230000002f%3Csvg”%3Csvg'”；
}
.swiper-button-prev2.swiper-button-white，
.swiper容器rtl.swiper-button-next2.swiper-button-white{
背景图像：url（“数据：image/svg+xml；charset=utf-8，%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2fs2000%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%2C22L0%2C22L0%2C22z'%3fff%3fff%3fsvg”%3fsvg”）；
}
.swiper-button-next2，
.swiper容器rtl.swiper-button-prev2{
背景图像：url（“数据：image/svg+xml；charset=utf-8，%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2fs2000%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%23007aff%2F%3E”%3Csvg”）；
右：10px；
左：自动；
}
.swiper-button-next2.swiper-button-black，
.swiper容器rtl.swiper-button-prev2.swiper-button-black{
背景图像：url（“数据：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%2c2c2.1L5%2C0L27%2C22L27%2C22z'%20fill%3f230000002f%3E”%3fsvg%3fsvg”%3E%3fsvg”）；
}
.swiper-button-next2.swiper-button-white，
.swiper容器rtl.swiper-button-prev2.swiper-button-white{
背景图像：url（“数据：image/svg+xml；charset=utf-8，%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F200
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
    });
});