vue轮播图插件

百度了一下常用的有三种：
1、vue-awesome-swiper
使用：
npm install vue-awesome-swiper@3 --save-dev（要注意这个时候安装就是一个坑，一定要指定版本号，要不然你接下来就是一堆错）;
页面引入：

      <div>
          <swiper class="banner" :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item, index) in bannerList" :key="index">
              <img :src="item.src" alt=""/>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
1
2
3
4
5
6
7
8

<script>
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import "swiper/dist/css/swiper.css";
  export default {
    components:{
      swiper,
      swiperSlide,
    },
    data(){
     return {
        swiperOption: {
         autoplay: true,
         speed: 300,
         loop: true,
         pagination: {
          el: ".swiper-pagination", //分页器
          clickable: true,
         },
      },
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2、 c-swipe (不支持自动轮播)
使用：npm install c-swipe --save
页面引入：

<div>
 <swipe pagination='true'>
   <swipe-item v-for="(item,index) in bannerList" :key='index'>
     <img :src="item.src" alt=""/>
   </swipe-item>
 </swipe>
</div>
1
2
3
4
5
6
7

<script>
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe'
export default {
  data(){
   return {
   
    }
  },
  components:{
    Swipe,
    SwipeItem,
    
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、vue-concise-slider（我用了，不轮播，图片也没出来不知道什么原因，看了文档也没发现为什么，感觉这个用的人也挺多，你们有空可以去试下这个）
vue-concise-slider插件

4、有缩略图的轮播图swiper
官网地址：，官网有每个版本的使用方法，具体的看官网使用就可以了。

使用：
我使用的是"swiper": “^5.4.5”,

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
   methods:{
      getBanner(){
       //mySwiper轮播图自定义类名，mySwiper2缩略图类名
         new Swiper(".mySwiper", {
            spaceBetween: 10,
            observer: true,
            observeParents: true,
            thumbs: {
              swiper: {
                el: ".mySwiper2",
                spaceBetween: 4,
                slidesPerView: 5,
                watchSlidesVisibility: true,
                observer: true,
                observeParents: true,
              },
              autoScrollOffset: 1,
            },
          });
      }
   }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

           <!-- swiper-container,"swiper-wrapper,swiper-slide这三个类一定要有 -->
           <div>
             <!-- 轮播图 -->
              <div class="swiper-container mySwiper img_list">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(img, index) in imgList"
                    :key="index"
                  >
                    <img :src="img" class="app_img" />
                  </div>
                </div>
              </div>
              <!-- 缩略图 -->
              <div class="swiper-container mySwiper2">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(img, index) in imgList"
                    :key="index"
                  >
                    <img :src="img" class="scan_img" />
                  </div>
                </div>
              </div>
            </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

实现效果：