swiper7-2.添加点击上一张和下一张功能 

 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-button-next"></div>
16     <div class="swiper-button-prev"></div>
17   </div>
18 </template>
19 <script>
20 import Swiper from "swiper/swiper-bundle.min.js";
21 import "swiper/swiper-bundle.min.css";
22 
23 export default {
24   components: {},
25   methods: {},
26   mounted() {
27     window.setTimeout(() => {
28       // 创建swiper对象
29       const swiper = new Swiper(".mySwiper", {
30         // 增加了前进后退功能
31         navigation: {
32           nextEl: ".swiper-button-next",
33           prevEl: ".swiper-button-prev",
34         },
35       });
36     }, 2000);
37   },
38 };
39 </script>
40 
41 <style lang="scss" scoped>
42 .swiper {
43   width: 100%;
44   height: 700px;
45 }
46 
47 .swiper-slide {
48   text-align: center;
49   font-size: 18px;
50   background: #fff;
51 
52   /* Center slide text vertically */
53   display: -webkit-box;
54   display: -ms-flexbox;
55   display: -webkit-flex;
56   display: flex;
57   -webkit-box-pack: center;
58   -ms-flex-pack: center;
59   -webkit-justify-content: center;
60   justify-content: center;
61   -webkit-box-align: center;
62   -ms-flex-align: center;
63   -webkit-align-items: center;
64   align-items: center;
65 }
66 
67 .swiper-slide img {
68   display: block;
69   width: 100%;
70   height: 100%;
71   /* object-fit 让图片适应容器，但是设置宽高百分百，还有必要设置这个属性吗  */
72   object-fit: cover;
73 }
74 </style>

 

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