vue-awesome-swiper轮播图实现

快速便捷的轮播图vue插件，没有赘述多余介绍，直接上步骤。

组件安装

npm install vue-awesome-swiper --save

组件中引入

import 'swiper/dist/css/swiper.css';
import { swiper,swiperSlide} from 'vue-awesome-swiper';

选项

export default {
   name:'banner',
  //引入组件
   components:{
       swiper,
       swiperSlide
   },
   data() {
      return {
        swiperOption: {
          //分页
          pagination: {
            el: '.swiper-pagination',//绑定元素
            clickable: true//分页是否可点击
          },
          //设置自动播放
          autoplay:{
              delay: 5000,
          },
        }
      }
    }
   
}

模板结构

<template>
    <div class="banner container">

        <!-- swiper -->
        <swiper :options="swiperOption" >

            <swiper-slide>
                <img src="@/assets/images/4e96457580744e0484f66c414c2532af.jpg" alt="banner01">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/images/f1cc61461e08141debf520be50ab362f.png" alt="banner01">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/images/f975876866ad188bdafbbaab6f7bb07c.jpeg" alt="banner01">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/images/130e1b36391d9a13ec19d4659abe70a7.png" alt="banner01">
            </swiper-slide>
            
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
       
    </div>
</template>

完整代码显示

<template>
    <div class="banner container">

        <!-- swiper -->
        <swiper :options="swiperOption" >

            <swiper-slide>
                <img src="@/assets/images/4e96457580744e0484f66c414c2532af.jpg" alt="banner01">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/images/f1cc61461e08141debf520be50ab362f.png" alt="banner01">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/images/f975876866ad188bdafbbaab6f7bb07c.jpeg" alt="banner01">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/images/130e1b36391d9a13ec19d4659abe70a7.png" alt="banner01">
            </swiper-slide>
            
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
       
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper,swiperSlide} from 'vue-awesome-swiper';

export default {
   name:'banner',
   components:{
       swiper,
       swiperSlide
   },
   data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            //dynamicBullets: true,
            clickable: true
          },
          autoplay:{
              delay: 5000,
          },
        }
      }
    }
   
}
</script>

<style lang="scss" scoped>
.banner{
    overflow: hidden;
    margin-top: 25px;

    img{
        width: 100%;
    }
}
 
</style>

实现样式

点击查看官方文档