vue项目中使用swiper插件

第一步：安装swiper插件

yarn add swiper -D

第二步：创建swiper标签

<div class="swiper">
    <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 class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

第三步：vue文件中引入swiper

//{}里是需要用到的swiper组件，根据个人需要增删。
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper'

第四步：main.js中引入css样式

import 'swiper/swiper-bundle.css';

第五步：初始化

Swiper.use([Pagination, Autoplay]); // 需要什么组件，就加进去
    const mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 1000, //延迟时间
            stopOnLastSlide: false, //是否轮播到最后一张停止
            disableOnInteraction: false, //是否交互后停止轮播
        },
        loop: true, //循环
        pagination: {
            el: '.swiper-pagination', // 分页器
            clickable: true
        },
    })
    ```