Vue中使用swiper插件实现轮播图 

 1 <template>
 2   <div class="HeadRotation">
 3 <!-- 列表轮播图 -->
 4     <div class="swiper-container qwe">
 5       <div class="swiper-wrapper">
 6         <div class="swiper-slide">
 7              <img :src="image" alt="图片未加载">
 8         </div>
 9         <div class="swiper-slide">
10             <img :src="image1" alt="图片未加载">
11         </div>
12       </div>
13       <!-- 如果需要分页器 -->
14       <div class="swiper-pagination paging"></div>
15 
16       <!-- 如果需要导航按钮 -->
17       <div class="swiper-button-prev"></div>
18       <div class="swiper-button-next"></div>
19 
20       <!-- 如果需要滚动条 -->
21       <!-- <div class="swiper-scrollbar"></div> -->
22     </div>
23   </div>
24 </template>
25 
26 <script>
   //局部引入swiper插件
27 import Swiper from "swiper";
28 import "swiper/css/swiper.min.css";
29 export default {
30     name: "HeadRotation",
31     data () {
32         return {
33             image: require("../../assets/images/img_banner.jpg"),
34             image1: require("../../assets/images/img_banner1.jpg")
35 
36         }
37     },
38 
39     mounted() {
40         new Swiper ('.qwe', {
41            
42             loop: true, // 循环模式选项
43             autoplay: true,//自动循环
44             
45             // 如果需要分页器
46             pagination: {
47             el: '.paging',
48             },
49             
50             // 如果需要前进后退按钮
51             navigation: {
52             nextEl: '.swiper-button-next',
53             prevEl: '.swiper-button-prev',
54             },
55             
56             // 如果需要滚动条
57             // scrollbar: {
58             // el: '.swiper-scrollbar',
59             // },
60         })
61          
62     },
63     
64 };
65 </script>
66 
67 <style lang="scss" scoped>
68 .banner {
69   width: 100%;
70 }
71 .swiper-slide img {
72     width: 100%;
73     min-width: 1200px;
74     height: 100%;
75 }
76 </style>

 

posted @ 2020-07-08 00:08  浅浅梦  阅读(3298)  评论(0)    收藏  举报