鼠标悬停时在一页上自动播放单独的 Swiper JS 滑块

问题描述 投票：0回答：1

1. 我有一个页面，我将在同一页面上使用多个 Swiper JS 滑块。 2. 我希望这样当用户将光标悬停在其中一个滑块上时，自动播放开始并悬停关闭 - 自动播放停止。这段代码运行良好：

    $(".swiper").each(function(index, element){
      var $this = $(this);
      var swiper = new Swiper(this, swiperCMSglobalSetting);
      
        $(this).mouseenter(function () {
            swiper.autoplay.start();
        });
        $(this).mouseleave(function () {
            swiper.autoplay.stop();
        });
    
    });

3.但是...当用户将鼠标悬停在其父元素上时，我需要每个单独的滑块单独自动播放

.container
。这就是我被困住的地方。

4. 我已经尝试了以下代码（以及许多其他失败的尝试），当我将鼠标悬停在一个滑块上时，它在逻辑上会自动播放所有滑块。

        $(".container").mouseenter(function () {
            swiper.autoplay.start();
        });
        $(".container").mouseleave(function () {
            swiper.autoplay.stop();
        });

我希望滑块实际上悬停在自动播放上 - 而且当我悬停在父 

.container
元素上时也必须如此...

完整代码在这里：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />

<script>
$(document).ready(function() {

    let swiperCMSglobalSetting = {
        speed: 400,
        spaceBetween: 100,
        autoplay: false,
        disableOnInteraction: false,
        effect: "fade",
        pagination: false,
        navigation: false,
        loop:true,
    }
    
    $(".swiper").each(function(index, element){
      var $this = $(this);
      var swiper = new Swiper(this, swiperCMSglobalSetting);
      
        $(".container").mouseenter(function () {
            swiper.autoplay.start();
        });
        $(".container").mouseleave(function () {
            swiper.autoplay.stop();
        });
    
    });

});

</script>


<style>

.swiper { width: 100%; height: 250px; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: flex; justify-content: center; align-items: center; }

</style>




</head>

<body>




<!-- Slider main container -->
<div class="container">
    <div class="swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" data-swiper-autoplay="500" style="background-color: #ecf0f1;">Slide 1.1</div>
        <div class="swiper-slide" data-swiper-autoplay="500" style="background-color: #d7dfe1;">Slide 1.2</div>
        <div class="swiper-slide" data-swiper-autoplay="500" style="background-color: #c7d0d3;">Slide 1.3</div>
        ...
      </div>
    </div>
</div>

<hr>

<!-- Slider main container -->
<div class="container">
    <div class="swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" data-swiper-autoplay="500" style="background-color: #ecf0f1;">Slide 2.1</div>
        <div class="swiper-slide" data-swiper-autoplay="500" style="background-color: #d7dfe1;">Slide 2.2</div>
        <div class="swiper-slide" data-swiper-autoplay="500" style="background-color: #c7d0d3;">Slide 2.3</div>
        ...
      </div>
    </div>
</div>








</body>

</html>
javascript jquery slider swiper.js
1个回答
0
投票

$(".container")
将匹配 DOM foreach 
.container
元素中的所有 
.swiper
元素。这就是您当前的代码启动和停止所有刷卡器的原因。

相反，请考虑仅使用 

$('.container')
 选择正在迭代的 swiper 的父级 
.closest()。






$(document).ready(function () {
  let swiperCMSglobalSetting = {
    speed: 400,
    spaceBetween: 100,
    autoplay: false,
    disableOnInteraction: false,
    effect: "fade",
    pagination: false,
    navigation: false,
    loop: true,
  };

  $(".swiper").each(function (index, element) {
    var $this = $(this);
    var swiper = new Swiper(this, swiperCMSglobalSetting);

    var $container = $this.closest(".container");
    $container.mouseenter(function () {
      swiper.autoplay.start();
    });
    $container.mouseleave(function () {
      swiper.autoplay.stop();
    });
  });
});


.swiper {
  width: 100%;
  height: 250px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff; /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
    />
  </head>

  <body>
    <!-- Slider main container -->
    <div class="container">
      <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div
            class="swiper-slide"
            data-swiper-autoplay="500"
            style="background-color: #ecf0f1"
          >
            Slide 1.1
          </div>
          <div
            class="swiper-slide"
            data-swiper-autoplay="500"
            style="background-color: #d7dfe1"
          >
            Slide 1.2
          </div>
          <div
            class="swiper-slide"
            data-swiper-autoplay="500"
            style="background-color: #c7d0d3"
          >
            Slide 1.3
          </div>
          ...
        </div>
      </div>
    </div>

    <hr />

    <!-- Slider main container -->
    <div class="container">
      <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div
            class="swiper-slide"
            data-swiper-autoplay="500"
            style="background-color: #ecf0f1"
          >
            Slide 2.1
          </div>
          <div
            class="swiper-slide"
            data-swiper-autoplay="500"
            style="background-color: #d7dfe1"
          >
            Slide 2.2
          </div>
          <div
            class="swiper-slide"
            data-swiper-autoplay="500"
            style="background-color: #c7d0d3"
          >
            Slide 2.3
          </div>
          ...
        </div>
      </div>
    </div>
  </body>
</html>







    

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.