vue2引入swiper

npm i swiper@5

//页面内引入
import "swiper/css/swiper.css";
import Swiper from 'swiper'

页面结构

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(img,index) in bannerList" :key="index">
            <img :src="img.imgUrl" />
        </div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

mounted中实例化

new Swiper(".swiper-container", {
    loop: true,
    mousewheel: false,
    keyboard: true,
    auto: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
    },                    
})