因为老项目 轮播版本还是swipr4.5.1 本来项目是vue2想用组件化的形式 swiper7/8已经支持组件引入了 但是老项目中涉及的很多 不能对版本进行升级 只能使用旧的版本。
官方文档
swiper4使用方法：www.swiper.com.cn/usage/index… 参数配置文档:www.swiper.com.cn/api/paramet…
教程
图例
装依赖
npm i swiper@4 -S
引css
资源路径可以查看node_modules包的相对路径
import "swiper/dist/css/swiper.min.css";
引class类
import Swiper from "swiper";
书写dom
<div class="swiper">
<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>
书写js
new Swiper 需要在dom渲染之后 进行初始化。
// 初始化swiper
new Swiper(".swiper-container", {
direction: "horizontal",
loop: false,
speed: 500,
// 如果需要分页器
pagination: {
el: ".swiper-pagination"
}
});
