swiper7-14. 设置无限滚动
作者:互联网
1 <template> 2 <!-- Swiper --> 3 <div class="swiper mySwiper"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div> 6 <div class="swiper-slide">Slide 2</div> 7 <div class="swiper-slide">Slide 3</div> 8 <div class="swiper-slide">Slide 4</div> 9 <div class="swiper-slide">Slide 5</div> 10 <div class="swiper-slide">Slide 6</div> 11 <div class="swiper-slide">Slide 7</div> 12 <div class="swiper-slide">Slide 8</div> 13 <div class="swiper-slide">Slide 9</div> 14 </div> 15 <div class="swiper-button-next"></div> 16 <div class="swiper-button-prev"></div> 17 <div class="swiper-pagination"></div> 18 <!-- 可以无限滑动 --> 19 </div> 20 </template> 21 <script> 22 import Swiper from "swiper/swiper-bundle.min.js"; 23 import "swiper/swiper-bundle.min.css"; 24 export default { 25 components: {}, 26 methods: {}, 27 mounted() { 28 this.$nextTick(() => { 29 // 创建swiper1对象 30 var swiper = new Swiper(".mySwiper", { 31 slidesPerView: 1, // 设置slider容器能够同时显示的slides数量( 32 spaceBetween: 30, // 在slide之间设置距离(单位px) 33 // 设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。 34 // loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。 35 loop: true, 36 // 使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式 37 pagination: { 38 el: ".swiper-pagination", 39 clickable: true, 40 }, 41 navigation: { 42 nextEl: ".swiper-button-next", 43 prevEl: ".swiper-button-prev", 44 }, 45 }); 46 }); 47 }, 48 }; 49 </script> 50 51 <style lang="scss" scoped> 52 .swiper { 53 width: 100%; 54 height: 500px; 55 } 56 57 .swiper-slide { 58 text-align: center; 59 font-size: 18px; 60 background: #fff; 61 62 /* Center slide text vertically */ 63 display: -webkit-box; 64 display: -ms-flexbox; 65 display: -webkit-flex; 66 display: flex; 67 -webkit-box-pack: center; 68 -ms-flex-pack: center; 69 -webkit-justify-content: center; 70 justify-content: center; 71 -webkit-box-align: center; 72 -ms-flex-align: center; 73 -webkit-align-items: center; 74 align-items: center; 75 } 76 77 .swiper-slide img { 78 display: block; 79 width: 100%; 80 height: 100%; 81 object-fit: cover; 82 } 83 84 .swiper { 85 margin-left: auto; 86 margin-right: auto; 87 } 88 </style>
标签:滚动,14,slide,webkit,Slide,swiper7,display,swiper,center 来源: https://www.cnblogs.com/jyjy28/p/15679989.html