swiper

npm install swiper@3 --save-dev  
swiper各版本不同写法也不同，要注意，这是3.x
引入
或者mainjs引入
import 'swiper/dist/css/swiper.min.css'
import Swiper from 'swiper'

<div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            :list="list"                      // 这里的数据需要使用自己定义的数组或者从后端返回的数组
            v-for="item in list"
            :key="item.id"                
          >
            <img :src="item.src" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!--    <div class="swiper-scrollbar"></div>-->
      </div>

mounted() {
  /* eslint-disable no-new */
    setTimeout(()=>{
      this.swiper()//防止第一张图闪过
    },500)
}

 methods: {
	swiper(){
      new Swiper('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
      
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
        // 如果需要自动切换海报
        autoplay: 2000,
        autoplayDisableOnInteraction: false,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      })
    }
	}
多个swiper就new多个swiper