javascript - 如何在模式循环滑动器中启用事件？

Question

我有一些关于 swiper 的问题，这是代码

HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</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>
</div>

CSS:

.swiper-slide {
    height: 300px;
    border: 1px dotted #aaa;
}

.swiper-container {
    width:900px;
}

JS:

$('.swiper-slide').on('click',function(e)
                     {
    e.preventDefault();
    alert("HIHI");
});
$(document).ready(function() {
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      slidesPerView: 2,
      slidesPerGroup: 2,
      loop:true,
      spaceBetween: 30,
      //visibilityFullFit: true,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    })

});

第一次渲染时，我单击幻灯片，它开始工作并显示警报:

但是当我滚动到下一张幻灯片时。它不起作用？如何让所有幻灯片工作？

我在 example 编辑代码

Answer 1

.on('click') 与 jquery API 相关(不是 Swiper API)。一般来说，最好使用 swiper API 事件来处理点击(更模块化+更清晰的代码+获取this一些属性，例如this.clickedSlide) .

click event - Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments.

https://swiperjs.com/api/#events

  swiper.on("click", function() {
    /* do something */
      alert("click on:" + this.clickedSlide.textContent);
  });

相关:

• How to use iDangerous Swiper and jquery .click(); at the same time

• https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

代码示例

html,
body {
  position: relative;
  height: 100%;
  background: #eee;
}

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

<link rel="stylesheet" href="https://unpkg.com/swiper@6.7.1/swiper-bundle.min.css">

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</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>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@6.7.1/swiper-bundle.min.js"></script>

<script>
  $(document).ready(function() {
    /* on ready */
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      slidesPerView: 2,
      slidesPerGroup: 2,
      loop:true,
      spaceBetween: 30,
      //visibilityFullFit: true,
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    })
    
      mySwiper.on('click', function() {
      // do something
      alert("click");
      } );
  
    });


  

</script>

一般问题(V4 VS V5):

swiper4:

pagination: '.swiper-pagination',
paginationClickable: true,

在 swiper 5 上，这是语法(阅读文档):

pagination: {
  el: '.swiper-pagination',
  clickable: true,
},