swiper7-15. 一个容器放三张图片并无限滚动
作者:互联网
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: 3, // 设置slider容器能够同时显示的slides数量(carousel模式)。 32 spaceBetween: 30, // 在slide之间设置距离(单位px)。 33 slidesPerGroup: 3, // 在carousel mode下定义slides的数量多少为一组。,也就是滑动时是滑走几张轮播图 34 // 设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。 35 // loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。 36 loop: true, // 开启无限滚动 37 loopFillGroupWithBlank: true, // 在loop模式下,为group填充空白slide,意思是如果轮播图不够3个,就会自动填一个空白的上去,不够3个 38 pagination: { 39 el: ".swiper-pagination", 40 clickable: true, 41 }, 42 navigation: { 43 nextEl: ".swiper-button-next", 44 prevEl: ".swiper-button-prev", 45 }, 46 }); 47 }); 48 }, 49 }; 50 </script> 51 52 <style lang="scss" scoped> 53 .swiper { 54 width: 100%; 55 height: 500px; 56 } 57 58 .swiper-slide { 59 text-align: center; 60 font-size: 18px; 61 background: #fff; 62 63 /* Center slide text vertically */ 64 display: -webkit-box; 65 display: -ms-flexbox; 66 display: -webkit-flex; 67 display: flex; 68 -webkit-box-pack: center; 69 -ms-flex-pack: center; 70 -webkit-justify-content: center; 71 justify-content: center; 72 -webkit-box-align: center; 73 -ms-flex-align: center; 74 -webkit-align-items: center; 75 align-items: center; 76 } 77 78 .swiper-slide img { 79 display: block; 80 width: 100%; 81 height: 100%; 82 object-fit: cover; 83 } 84 </style>
标签:15,center,slide,webkit,Slide,swiper7,三张,display,swiper 来源: https://www.cnblogs.com/jyjy28/p/15679992.html