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
npm install --save swiper
Introduce Swiper into the Vue main file:
// main.js import Vue from 'vue' import Swiper from 'swiper' Vue.use(Swiper)
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>
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 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!