一、npm下载安装swiper@5版本(“swiper”: “^5.4.5”)
npm i swiper@5
二、导入js和css
// 导入js
import Swiper from 'swiper'
// 引入css
import 'swiper/css/swiper.min.css'
三、添加HTML内容
Swiper7的默认容器是".swiper",Swiper6之前是".swiper-container"。
<template>
<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>
</template>
四、初始化swiper
这一步用到了Swiper的真实DOM结构,在vue项目里应该写在生命周期mounted(){}中。
如果用接口请求到的数据,就需要写在updated(){}中。
mounted() {
new Swiper(".swiper-container", {
direction: "vertical", // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},