~~~ <template> <div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide v-for="item of swiperList" :key="item.id"> <img class="swiper-img" :src="item.imgUrl" > </swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </div> </template> <script> export default { name: "HomeSwiper", data() { return { swiperOption: { pagination: { el: ".swiper-pagination" }, /* 是否循環 */ loop: true, autoplay: { /* 觸碰后自動切換是否停止 */ disableOnInteraction: false }, //當組件套組件的時候會出現一些錯誤，設置兩個等于true observer: true, observerParents:true }, swiperList: [ {id:'001',imgUrl:"http://img1.qunarzz.com/piao/fusion/1811/b4/ac00a771d74f5a02.jpg_750x200_a71cff60.jpg"}, {id:'002',imgUrl:"http://img1.qunarzz.com/piao/fusion/1710/15/898d6d74e9b06202.jpg_750x200_89b4509e.jpg"}, {id:'003',imgUrl:"http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"} ] }; } }; </script> <style scoped> .swiper-img { width: 100%; height: 300px; } .wrapper >>> .swiper-pagination-bullet-active { background: #fff !important; } </style> ~~~