安装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', }, }) }) }