swiper

第一步安装

npm install swiper //这个是在别的情况下载的文件
npm install vue-awesome-swiper --save
npm install vue-awesome-swiper -D

swiper4.0,一定要引用到公共样式里否则会报错

• 这里讲解的是用模板来使用swiper
  1. html部分

        <div class="swiper-container">
          <!--/*options我们对轮播图的所有配置*/-->
          <swiper :options="swiperOption" >

            <swiper-slide v-for="itemsimg in itemImgs" :key="itemsimg.id">
              <img :src="itemsimg.img" alt="">
            </swiper-slide>
            <!--分页slot 负责看见这个公共类似display-->
            <div class="swiper-pagination" slot="pagination"></div>
            <!--前后按钮-->
            <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
          </swiper>
        </div>

2. script部分
   swiperOption是配置对象
   公能配置可以在swiperOption可以单独写，也可以用对象的形式放到swiperOption

<script>
    import {swiper,swiperSlide} from 'vue-awesome-swiper'

    export default {
        name : "swiper",
      data(){
        return{
          itemImgs:[
            {id:0,img: 'https://i1.mifile.cn/a4/xmad_15590358701464_sEyqY.jpg'},
            {id:1,img:  'https://i1.mifile.cn/a4/xmad_15590357922113_dZxos.jpg'},
            {id:2,img:  'https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg'},
            {id:3,img: 'https://i1.mifile.cn/a4/xmad_15586683348207_opnBm.jpg'},
            {id:4,img:  'https://i1.mifile.cn/a4/xmad_15590297188488_lNBWg.jpg'},
          ],
        swiperOption:{
          notNextTick:false,//如果不是第一时间获取数据 就选择false 或者默认不写
        autoplay:{
            delay:2000,//默认是3000
          stopOnLastSlide:false,//如果位true 到最后一个停止轮播
          disableOnInteraction:true,//如果为用户操作后停止轮播 false 则不生效
        },
          loop:true,//是否循环播放
          slidesPerView:2,///视图上显示几个图片
          direction:'horizontal',//判断滑动方向
          paginationClickable:true,//是否开启点击i切换
          pagination:{
            el:'',
            type:'bullets',
            clickable:true
          },
          navigation:{
            nextEl:'',
            prevEl:''
          },
          preventClicks:true,//上面有了可以不写这个
        }
        }
      },
      //创建模板
      components:{
        swiper,
        swiperSlide
      },
    }
</script>