vue2 使用swiper

1. 安装swiper, vue2安装 5版本好用一些，7、8版本是vue3

npm i swiper@5

2. 在页面中引入swiper中的JS\CSS

import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

 3. 复制代码放入即可

// 从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in photo" :key="index">
                <img :src="item.img" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>


 mounted() {
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
                dynamicMainBullets: 2,
                clickable: true,
            },
        })
}