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>

 

posted @ 2021-12-12 17:26  sky-su  阅读(1091)  评论(0)    收藏  举报