找了好久,文档都比较混乱,自己总结一份 如下
安装
npm install --save swiper引入文件
import Swiper from 'swiper/dist/js/swiper.js' import 'swiper/dist/css/swiper.min.css'html内容
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</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> 导航等组件可以放在container之外初始化swiper
new Swiper ('.swiper-container', { loop: true, //循环 autoplay: { //滑动后继续播放(不写官方默认暂停) disableOnInteraction: false, }, pagination: { //分页器 el: '.swiper-pagination' } })更多的参数配置 可看官方api https://www.swiper.com.cn/api/index.html
