1 <template> 2 <div class="swiper mySwiper"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">Slide 1</div> 5 <div class="swiper-slide">Slide 2</div> 6 <div class="swiper-slide">Slide 3</div> 7 <div class="swiper-slide">Slide 4</div> 8 <div class="swiper-slide">Slide 5</div> 9 <div class="swiper-slide">Slide 6</div> 10 <div class="swiper-slide">Slide 7</div> 11 <div class="swiper-slide">Slide 8</div> 12 <div class="swiper-slide">Slide 9</div> 13 </div> 14 <div class="swiper-pagination"></div> 15 </div> 16 </template> 17 <script> 18 import Swiper from "swiper/swiper-bundle.min.js"; 19 import "swiper/swiper-bundle.min.css"; 20 21 export default { 22 components: {}, 23 methods: {}, 24 mounted() { 25 this.$nextTick(() => { 26 // 创建swiper对象 27 const swiper = new Swiper(".mySwiper", { 28 spaceBetween: 30, // 用于作为间隔,每张轮播图之间的间隔单位px,spaceBetween : '10%',按container的百分比 29 pagination: { 30 el: ".swiper-pagination", 31 clickable: true, 32 }, 33 }); 34 }); 35 }, 36 }; 37 </script> 38 39 <style lang="scss" scoped> 40 .swiper { 41 width: 100%; 42 height: 700px; 43 background-color: skyblue; 44 } 45 46 .swiper-slide { 47 text-align: center; 48 font-size: 18px; 49 background: #fff; 50 51 /* Center slide text vertically */ 52 display: -webkit-box; 53 display: -ms-flexbox; 54 display: -webkit-flex; 55 display: flex; 56 -webkit-box-pack: center; 57 -ms-flex-pack: center; 58 -webkit-justify-content: center; 59 justify-content: center; 60 -webkit-box-align: center; 61 -ms-flex-align: center; 62 -webkit-align-items: center; 63 align-items: center; 64 } 65 66 .swiper-slide img { 67 display: block; 68 width: 100%; 69 height: 100%; 70 /* object-fit 让图片适应容器,但是设置宽高百分百,还有必要设置这个属性吗 */ 71 object-fit: cover; 72 } 73 </style>