vue-awesome-swiper的分页的坑_vue-awesome-swiper 分页-CSDN博客

本文链接：https://blog.csdn.net/weixin_43837268/article/details/89479785

本文详细介绍如何在Vue项目中实现一个轮播图组件，包括导入VueAwesomeSwiper库、配置样式、设置轮播参数及数据绑定等步骤，实现图片自动播放、循环展示及小点导航等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.main.js


import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

2.slide.vue

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" class="swiper-container">
            <!-- slides -->
            <swiper-slide class="swiper-item" v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="去哪儿门票">
            </swiper-slide>
            <!-- Optional controls ,显示小点-->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template><script>
export default {
    name: "HomeSwiper", //es6的写法，相当于data:function(){return{swiperOption:{}}}
    data() {
        return {
            swiperOption: {
                // 参数选项,显示小点
                pagination: { el: ".swiper-pagination" }, //循环
                loop: true, //每张播放时长3秒，自动播放
                autoplay: {
                    delay: 3000, //自动切换的时间间隔，单位ms
                    stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
                    stopOnLastSlide: true, //如果设置为true，当切换到最后一个slide时停止自动切换。
                    disableOnInteraction: true, //用户操作swiper之后，是否禁止autoplay。
                    reverseDirection: false, //开启反向自动轮播。
                    waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
                    disableOnInteraction: false,
                    autoplayDisableOnInteraction: false
                },
                speed: 600,
            }, //三张轮播，使用变量循环
            swiperList: [
                {
                    id: "001",
                    imgUrl:
                        "http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg"
                },
                {
                    id: "002",
                    imgUrl:
                        "http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
                },
                {
                    id: "003",
                    imgUrl:
                        "http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg"
                }
            ]
        };
    }
};
</script>
<style scoped>
.wrapper >>> .swiper-pagination-bullet-active {
    background: #fff !important;
}

.wrapper {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 26.6666667%;
    background: #ccc;
}

.swiper-item {
    width: 100%;
}
.swiper-img {
    width: 100%;
}
</style>