Vue中使用swiper轮播图方法

安装swiper版本
cnpm install --save swiper@4.5.1

 安装swiper的依赖

cnpm install --save vue-awesome-swiper@4.1.1

// 局部引入swiper,如果在main.js中引入过,以下三行可不写
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import 'swiper/dist/js/swiper.min';

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div  class="swiper-slide" >
      <div class="hot-topic-item">
        <div class="item-pic">
                // 图片懒加载
                <img />
        </div>
      </div>
    </div>
  </div>
  // 左箭头。如果放置在swiper-container外面，需要自定义样式。
  <div class="swiper-button-prev"></div>
  // 右箭头。如果放置在swiper-container外面，需要自定义样式。    
  <div class="swiper-button-next"></div>
</div>

mounted() {
 setTimeout(() => {
   new Swiper('.swiper-container', {
	loop: true,
        speed: 600,
        slidesPerView: '3',
        spaceBetween: 21,
        preventClicksPropagation: false, //阻止默认事件
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
           delay: 3000, //3秒切换一次
           pauseOnMouseEnter: true, //悬停停止切换
        },
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 2,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },		
    })
 })
}