Swiper.js loop

Time:2021-6-9

Swiper.js loop

Swiper.js is a powerful plug-in and one of my favorite open source plug-ins. It can easily achieve carousel, tab tags and all kinds of coquettish page sliding effect.

I use swiper in many of my projects, which is very convenient to use with Vue. Recently, however, we encountered a small pit. After several searches and experiments, we found that it was related to the loop feature.

The specific phenomenon is that when the swiper turns on the loop attribute to realize the round robin, and uses the event binding syntax of Vue to bind events for each round robin page, when the round robin reaches a specific page, the bound events cannot be monitored normally.

For example, the following code:

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="i in 2"
          :key="i"
        >Slide {{ i }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'app',

  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true
    })

    console.log(mySwiper)
  },

  methods: {
    handleClick (i) {
      console.log(`click slide ${i}`)
    }
  }
}
</script>

This code actually adds two pages of round robin. Loop = true will achieve the effect of round robin. But in the actual use process, it is found that the click event listening bound to slide1 can be captured normally at the first time of initial display, and the click on the slide1 page displayed after continuous scrolling to the left has no effect. Similarly, when sliding to the right, the event listener bound to Slide2 may have problems.

Swiper.js loop

Open the debugging console to view the page elements. It is found that in addition to the slide element corresponding to the two page carousel actually added, there is a copied Slide2 element on the left and a copied slide1 element on the right.

Swiper.js loop
It turns out that swiper achieves the loop effect by copying several pages before and after the actual carousel page. Thinking of the problem mentioned above, I immediately guess that although the carousel page elements are copied, the event processor bound to Vue is not copied. So I took a closer look at the event listener bound to this element, and it turns out.

If you find the cause of the problem, you will have a clue. In fact, swiper.js also provides a set of event binding mechanism. We just need to bind the event listener specified by Vue in the original code through swiper initial options. The adjusted code is as follows.

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="i in 2"
          :key="i"
          :data-index="i"
        >Slide {{ i }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'app',

  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true,
      on: {
        click: (e) => {
          const index = e.target.dataset.index
          console.log(`click slide ${index}`)
        }
      }
    })

    console.log(mySwiper)
  }
}
</script>

Try the click event again and everything is OK.
Swiper.js loop

Blog text https://tianyong90.com/posts/swiper.js-loop-xiao-keng

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]