swiper7-1.初始化配置 

 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>
15 </template>
16 <script>
17 import Swiper from "swiper/swiper-bundle.min.js";
18 import "swiper/swiper-bundle.min.css";
19 /* 
20   swiper基本配置，可以滑动但是还不能自己滚动
21 
22 */
23 export default {
24   components: {},
25   methods: {},
26   mounted() {
27     this.$nextTick(() => {
28       const swiper = new Swiper(".mySwiper", {});
29     });
30   },
31 };
32 </script>
33 
34 <style lang="scss" scoped>
35 .swiper {
36   width: 100%;
37   height: 700px;
38 }
39 
40 .swiper-slide {
41   text-align: center;
42   font-size: 18px;
43   background: #fff;
44 
45   /* Center slide text vertically */
46   display: -webkit-box;
47   display: -ms-flexbox;
48   display: -webkit-flex;
49   display: flex;
50   -webkit-box-pack: center;
51   -ms-flex-pack: center;
52   -webkit-justify-content: center;
53   justify-content: center;
54   -webkit-box-align: center;
55   -ms-flex-align: center;
56   -webkit-align-items: center;
57   align-items: center;
58 }
59 
60 .swiper-slide img {
61   display: block;
62   width: 100%;
63   height: 100%;
64   /* object-fit 让图片适应容器，但是设置宽高百分百，还有必要设置这个属性吗  */
65   object-fit: cover;
66 }
67 </style>

 

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