## swiper.js 轮播组件 ``` <template> <div class="HomeSwiper"> <swiper :options="swiperOption"> <swiper-slide v-for="item of swiperList" :key="item.id"> <img class="swiper-img" :src="item.imgUrl"> </swiper-slide> // <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </div> </template> <script> export default { name: "HomeSwiper", props: { swiperList: { type: Array } }, data() { return { swiperOption: { pagination: { el: ".swiper-pagination" }, /\* 是否循环 \*/ loop: true, autoplay: { /\* 触碰后自动切换是否停止 \*/ disableOnInteraction: false } }, }; } }; </script> <style scoped> .swiper-img { width: 100%; height: 300px; } .wrapper >>> .swiper-pagination-bullet-active { background: #fff !important; } </style> ```