swiper7-10.增加滑动惯性 

 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-pagination"></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         slidesPerView: 3, // 用于设置容器中放几张显示的轮播图，之前是一个轮播图占满整个容器
29         spaceBetween: 30, // 用于作为间隔，每张轮播图之间的间隔单位px，spaceBetween : '10%',按container的百分比
30         freeMode: true, // 本来每次滑动只能划走一张轮播图，开启这个后就不一定了，会因为惯性的缘故，可能会滑动几张
31         pagination: {
32           el: ".swiper-pagination",
33           clickable: true,
34         },
35       });
36     });
37   },
38 };
39 </script>
40 
41 <style lang="scss" scoped>
42 .swiper {
43   width: 100%;
44   height: 500px;
45   background-color: skyblue;
46 }
47 
48 .swiper-slide {
49   text-align: center;
50   font-size: 18px;
51   background: #fff;
52 
53   /* Center slide text vertically */
54   display: -webkit-box;
55   display: -ms-flexbox;
56   display: -webkit-flex;
57   display: flex;
58   -webkit-box-pack: center;
59   -ms-flex-pack: center;
60   -webkit-justify-content: center;
61   justify-content: center;
62   -webkit-box-align: center;
63   -ms-flex-align: center;
64   -webkit-align-items: center;
65   align-items: center;
66 }
67 
68 .swiper-slide img {
69   display: block;
70   width: 100%;
71   height: 100%;
72   /* object-fit 让图片适应容器，但是设置宽高百分百，还有必要设置这个属性吗  */
73   object-fit: cover;
74 }
75 </style>

 

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