jquery - 单个页面上的多个滑动器初始化？

Question

我正在尝试在单个页面上使用多个轮播。并且每次用户仅使用其中一个轮播。所以我想一次只初始化一个 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 启动轮播，当用户将鼠标悬停在轮播中时，将其删除。但它不起作用。

Answer 1

问题:

根据您提供的 Codepen，您的想法是可行的，但使用 mouseenter 和 mouseout 会产生意想不到的副作用:

• 当鼠标进入 slider 时，会创建 slider ，但是当左右滑动时，鼠标光标经常会超出 slider 容器，从而触发 mouseout 事件并销毁 slider 。

  <

• 由于不断地破坏和重新创建 slider ，它不断地将 slider 重置为其第一个图像(因为 slider 被重置为其初始状态)。

这使得使用 slider 非常困难。

可能的解决方案:

• 我不知道您一次只能使用一个 slider 的原因，但可能值得考虑不断销毁和重新创建 slider 的性能，而不是简单地使用多个 slider 。 我建议您向 slider 插件的作者询问每种可能性的性能。

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

• 您还可以仅初始化每个 slider 一次，这样您就可以摆脱鼠标移出监听器。因此，在 mouseenter 事件中，您可以检查 slider 是否已初始化(通过第一次添加类或检查 slider 插件为容器提供的任何类)。

  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
      });
  });
  

我希望这会有所帮助。