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> 15 </template> 16 <script> 17 import Swiper from "swiper/swiper-bundle.min.js"; 18 import "swiper/swiper-bundle.min.css"; 19 /* 20 swiper基本配置,可以滑动但是还不能自己滚动 21 22 */ 23 export default { 24 components: {}, 25 methods: {}, 26 mounted() { 27 this.$nextTick(() => { 28 const swiper = new Swiper(".mySwiper", {}); 29 }); 30 }, 31 }; 32 </script> 33 34 <style lang="scss" scoped> 35 .swiper { 36 width: 100%; 37 height: 700px; 38 } 39 40 .swiper-slide { 41 text-align: center; 42 font-size: 18px; 43 background: #fff; 44 45 /* Center slide text vertically */ 46 display: -webkit-box; 47 display: -ms-flexbox; 48 display: -webkit-flex; 49 display: flex; 50 -webkit-box-pack: center; 51 -ms-flex-pack: center; 52 -webkit-justify-content: center; 53 justify-content: center; 54 -webkit-box-align: center; 55 -ms-flex-align: center; 56 -webkit-align-items: center; 57 align-items: center; 58 } 59 60 .swiper-slide img { 61 display: block; 62 width: 100%; 63 height: 100%; 64 /* object-fit 让图片适应容器,但是设置宽高百分百,还有必要设置这个属性吗 */ 65 object-fit: cover; 66 } 67 </style>