关于javascript:vue中使用swiper

1、装置依赖

 装置依赖须要留神：npm i vue-awesome-swiper swiper@5.4.5
// vue-awesome-swiper^4.1.1 swiper^5.4.5

2、组件应用

<template>
    <div>
        <div v-swiper:mySwiper="swiperOption">
            <div class="swiper-wrapper">
                <div class="swiper-slide" :key="banner" v-for="banner in banners">
                    <img :src="banner" />
                </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- 左右箭头 -->
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </div>
    </div>
</template>

<script>
/* 
装置依赖须要留神：npm  i  vue-awesome-swiper  swiper@5.4.5
*/
import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
// import 'swiper/swiper.min.css'
import 'swiper/css/swiper.css'

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    directives: {swiper: directive,},
    data() {
        return {
            banners: [
                'https://tse3-mm.cn.bing.net/th/id/OIP-C.4d7Emr_d4fJnEE6zK7pj_wHaFK?w=269&h=187&c=7&o=5&pid=1.7',
                'https://tse4-mm.cn.bing.net/th/id/OIP-C.A8wmUvdmAGYci6lCCpv0XgFHC-?w=322&h=187&c=7&o=5&pid=1.7',
                'https://tse1-mm.cn.bing.net/th/id/OIP-C.V2gX7ATUlbsW9CMuP_M_IgHaEK?w=333&h=187&c=7&o=5&pid=1.7',
                'https://tse3-mm.cn.bing.net/th/id/OIP-C._8HHoEpyGFYXrGOlD3bGHAHaEK?w=281&h=180&c=7&o=5&pid=1.7',
                'https://tse1-mm.cn.bing.net/th/id/OIP-C.9put7tRHT4xcPC6bOujzdwHaD9?w=294&h=180&c=7&o=5&pid=1.7',
            ],
            swiperOption: {
                pagination: {el: '.swiper-pagination',},
                // 设置点击箭头
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    delay: 2000,
                    // 当用户滑动图片后持续主动轮播
                    disableOnInteraction: false,
                },
                slidesPerView: 3, // 张数
                paginationClickable: true,
                spaceBetween: 15, // 间距
                loop: true,
            },
        }
    },
    mounted() {this.mySwiper.slideTo(3, 1000, false)
    },
}
</script>

<style>
</style>