对比swiper3版本,我觉得swiper4版本更方便一些,所以此文依托的是vue2+swiper4版本(不同版本命令不同,参考官网)。关于swiper7版本我个人是还没有使用。
npm i swiper@4 --save
安装swipernpm uninstall swiper
卸载swiper
html部分结构
一定要严格按照标准来!!
<!-- (第1层/最外层)盒子,class一定要有一个swiper-container -->
<div class="test-swiper swiper-container">
<!-- (第2层)盒子,class为swiper-wrapper;用于存放所有分页内容 -->
<div class="swiper-wrapper">
<!-- (第3层)盒子,class为swiper-slide;用于存放 单个 分页内容 -->
<div class="swiper-slide">
<!-- (第4层)盒子,class为swiper-zoom-container;用于控制里面的img缩放属性;如果这里不添加图片会被异常拉伸(具体问题没有找),所以推荐使用 -->
<div class="swiper-zoom-container">
<!-- (第5层)放置img -->
<img src="./assets/swiper-images/banner-fade-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="./assets/swiper-images/banner-fade-2.jpg" />
</div>
</div>
</div>
<!-- (属于第2层位置),class为swiper-button-next; 存放下一个页面的箭头 -->
<div class="swiper-button-next">
<!-- 存放字体文件的(本例中使用的是本地字体图标) -->
<i class="iconfont icon-forward"></i>
</div>
<!-- (属于第2层位置),class为swiper-button-prev; 存放上一个页面的箭头 -->
<div class="swiper-button-prev">
<i class="iconfont icon-back"></i>
</div>
<!-- (属于第2层位置),class为swiper-pagination; 存放分页(下方小圆点)按钮的 -->
<div class="swiper-pagination"></div>
</div>
vue部分
<script>
// 引入swiper
import Swiper from "swiper";
// 引入样式
import "swiper/dist/css/swiper.min.css";
// 引入本地字体图标
import "./assets/swiper-iconfont/iconfont.css";
export default {
name: "App",
// 挂载完成后
mounted() {
var mySwiper = new Swiper(".swiper-container", {
loop: true, // 循环模式
effect: "fade", // 渐现动画
// zoom: true, // 控制缩放(需要配合html使用)
// 自动轮播
autoplay: {
delay: 2000, // 2秒切换一次
disableOnInteraction: false, // 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
},
// 控制分页按钮
pagination: {
el: ".swiper-pagination",
// dynamicBullets: true, // 动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏。
clickable: true, // 此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
// 带数字的分页器(需要配合CSS使用,在CSS中会提到)
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
// 左右(前后)切换箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// 鼠标进入时
mySwiper.el.onmouseover = function () {
// 鼠标放上暂停轮播
mySwiper.autoplay.stop();
// 显示出前进后退按钮
mySwiper.navigation.$nextEl.css("display", "block");
mySwiper.navigation.$prevEl.css("display", "block");
};
// 鼠标移出后
mySwiper.el.onmouseleave = function () {
mySwiper.autoplay.start();
mySwiper.navigation.$nextEl.css("display", "none");
mySwiper.navigation.$prevEl.css("display", "none");
};
},
};
</script>
CSS部分(less写法)
/* 初始化盒子的大小(定义一个宽度即可) */
.test-swiper {
border: 1px solid red;
margin: 380px auto;
width: 580px;
/* 处理按钮显示 */
.swiper-button-next,
.swiper-button-prev {
/* 初始化开始状态为不显示 */
display: none;
/* 给个 任意背景色 清除原来的样式 */
background: rgb(175, 173, 173);
opacity: 0.8;
border-radius: 5px;
/* 处理字体图标居中 */
text-align: center;
line-height: 2.8em;
.iconfont {
font-size: 30px;
color: white;
}
}
.swiper-pagination {
/* 带数字的分页器,按钮若显示序号,则在这里处理 */
.swiper-pagination-bullet {
width: 21px;
height: 21px;
}
}
}