千锋逆战班--Vue swiper插件

Vue  swiper插件

千锋逆战班---停课不停学，线上一样学

我们终将上岸 阳光万里

中国加油！武汉加油！千锋加油！自己也要加油！

 

下载swiper

cnpm  i –save swiper

　　

引入swiper

import  Swiper  from‘swiper’; 

import ‘swiper/dist/css/swiper.min.css’;

import ‘swiper/dist/js/swiper.min.js’;

　　

使用swiper

 

<template>

     <div class="swiper-container">

      <div class="swiper-wrapper">

        <div class="swiper-slide"

          v-for="item in list"><img :src="item.img"></div>

      </div>

      <div class="swiper-pagination"

        @click="left"></div>

      <div class="swiper-button-next"

        @click="next"></div>

      <div class="swiper-button-prev"></div>

    </div>

</template>

　　

Mounted调用

mounted（）{

 var myswiper = new Swiper('.swiper-container', {

               autoplay:true,

               loop:true,

      preventLinksPropagation : false,

      navigation: {

       nextEl: '.swiper-button-next',

       prevEl: '.swiper-button-prev',

      }

     });

 

}

 

 

更多swiper属性可以查看官网文档http://www.swiper.com.cn/api/index.html