How to use swiper plug-in in vue

How to use the Swiper plug-in in Vue: Install the Swiper plug-in: npm install --save swiper Import the Swiper plug-in and install Vue.use(Swiper) Create Swiper components and create Swiper instances Configure Swiper options, such as automatic play, Loop playback and paging destroy the Swiper instance when the component is destroyed

How to use the Swiper plug-in in Vue

Install the Swiper plug-in

npm install --save swiper

Introduce Swiper plug-in

Introduce Swiper into the Vue main file:

// main.js
import Vue from 'vue'
import Swiper from 'swiper'
Vue.use(Swiper)

Create Swiper component

Create a Swiper instance in the Vue component:

<template>
  <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>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import { Swiper } from 'swiper'
export default {
  mounted() {
    // 创建 Swiper 实例
    new Swiper('.swiper-container', {
      // 设置 Swiper 选项
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}
</script>

Configure Swiper options

Use the Swiper option object to configure Swiper:

new Swiper('.swiper-container', {
  // 设置自动播放
  autoplay: {
    delay: 2000
  },
  // 启用循环播放
  loop: true,
  // 启用分页
  pagination: {
    el: '.swiper-pagination'
  }
})

Destroy the Swiper instance

Destroy the Swiper instance when the component is destroyed:

export default {
  mounted() {
    // 创建 Swiper 实例
    this.swiperInstance = new Swiper('.swiper-container', {
      // 设置 Swiper 选项
    })
  },
  beforeDestroy() {
    // 销毁 Swiper 实例
    this.swiperInstance.destroy()
  }
}

The above is the detailed content of How to use swiper plug-in in vue. For more information, please follow other related articles on the PHP Chinese website!