swiper7-3.添加指示点(就是小点点)
作者:互联网
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 <!-- 增加指示点标志 --> 15 <div class="swiper-pagination"></div> 16 </div> 17 </template> 18 <script> 19 import Swiper from "swiper/swiper-bundle.min.js"; 20 import "swiper/swiper-bundle.min.css"; 21 22 export default { 23 components: {}, 24 methods: {}, 25 mounted() { 26 this.$nextTick(() => { 27 // 创建swiper对象 28 const swiper = new Swiper(".mySwiper", { 29 pagination: { 30 // 增加指示点;使用分页器导航。分页器可使用小圆点样式(默认)、分式样式或进度条样式。 31 el: ".swiper-pagination", 32 // dynamicBullets: true, // 开启这个后,如果你的分页小点过多的话就会隐藏部分 33 // type: "progressbar", // 分页器的类型: ‘bullets’ 圆点(默认) ‘fraction’ 分式 ‘progressbar’ 进度条‘custom’ 自定义 34 clickable: true, // 开启这个,指示点可以点击了 35 renderBullet: function (index, className) { 36 // renderBullet。这个参数允许完全自定义分页器的指示点 37 return '<span class="' + className + '">' + (index + 1) + "</span>"; 38 }, 39 }, 40 }); 41 }); 42 }, 43 }; 44 </script> 45 46 <style lang="scss" scoped> 47 .swiper { 48 width: 100%; 49 height: 700px; 50 } 51 52 .swiper-slide { 53 text-align: center; 54 font-size: 18px; 55 background: #fff; 56 57 /* Center slide text vertically */ 58 display: -webkit-box; 59 display: -ms-flexbox; 60 display: -webkit-flex; 61 display: flex; 62 -webkit-box-pack: center; 63 -ms-flex-pack: center; 64 -webkit-justify-content: center; 65 justify-content: center; 66 -webkit-box-align: center; 67 -ms-flex-align: center; 68 -webkit-align-items: center; 69 align-items: center; 70 } 71 72 .swiper-slide img { 73 display: block; 74 width: 100%; 75 height: 100%; 76 /* object-fit 让图片适应容器,但是设置宽高百分百,还有必要设置这个属性吗 */ 77 object-fit: cover; 78 } 79 </style>
标签:center,align,点点,webkit,Slide,添加,swiper7,display,swiper 来源: https://www.cnblogs.com/jyjy28/p/15679875.html