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-scrollbar"></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 // 增加滚动条 29 scrollbar: { 30 el: ".swiper-scrollbar", 31 hide: true, // 这个是在不滚动的时候,隐藏滚动条 32 }, 33 }); 34 }); 35 }, 36 }; 37 </script> 38 39 <style lang="scss" scoped> 40 .swiper { 41 width: 100%; 42 height: 700px; 43 } 44 45 .swiper-slide { 46 text-align: center; 47 font-size: 18px; 48 background: #fff; 49 50 /* Center slide text vertically */ 51 display: -webkit-box; 52 display: -ms-flexbox; 53 display: -webkit-flex; 54 display: flex; 55 -webkit-box-pack: center; 56 -ms-flex-pack: center; 57 -webkit-justify-content: center; 58 justify-content: center; 59 -webkit-box-align: center; 60 -ms-flex-align: center; 61 -webkit-align-items: center; 62 align-items: center; 63 } 64 65 .swiper-slide img { 66 display: block; 67 width: 100%; 68 height: 100%; 69 /* object-fit 让图片适应容器,但是设置宽高百分百,还有必要设置这个属性吗 */ 70 object-fit: cover; 71 } 72 </style>