[vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper) [文檔](https://www.swiper.com.cn/api/pagination/299.html) ~~~ npm install vue-awesome-swiper --save ~~~ 如何使用再`main.js`中配置 ~~~ import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) ~~~ ~~~ <template> <div class="wrapper"> <swiper :options="swiperOption"> <!-- slides --> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1811/b4/ac00a771d74f5a02.jpg_750x200_a71cff60.jpg" alt=""> </swiper-slide> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1710/15/898d6d74e9b06202.jpg_750x200_89b4509e.jpg" alt=""> </swiper-slide> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg" alt=""> </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 } }, swiperList: [] }; } }; </script> <style scoped> .swiper-img { width: 100%; height: 300px; } //深度作用選擇器 //如果你希望 scoped 樣式中的一個選擇器能夠作用得"更深",例如影響子組件，你可以使用 >>> 操作符： .wrapper >>> .swiper-pagination-bullet-active { background: #fff !important; } </style> ~~~