简单了解 Swiper
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
效果
直接上效果
Vue2安装 Swiper
NPM
1、npm i vue-awesome-swiper@3.1.3 -S
注意：为什么不用4.1.1？
答：vue-awesome-swiper v4.1.1版 autoplay、effect等无效问题至今未解决
一些报错
Module not found: Error: Can't resolve 'swiper/dist/css/swiper.css' in ...
Module not found: Error: Can't resolve 'swiper/swiper-bundle.css' in ...
这些都是因为版本的问题而报的错
建议一开始就安装vue-awesome-swiper 3.1.3版，安装对应的swiper版本
然后全部按照3.1.3版本的文档来使用即可。*
引入
全局引入
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
单独引入
import 'swiper/dist/css/swiper.css'
// 注意下边引入的swiper和swiperSlide第一个字母s都是小写的，大写会报错
import { swiper, swiperSlide } from 'vue-awesome-swiper'
template 使用
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in mdv" :key="index">
<img :src="item.photo" alt="" />
<div class="banner-inner">
<div class="banner-inner-box">
<div class="title-box">{{ item.title }}</div>
<div class="content-box">{{ item.introduction }}</div>
<div class="toSeeDetail" @click="toSeeDetail(item)">
<el-button class="toSeeDetail" type="primary">点击查看</el-button>
</div>
</div>
</div>
</swiper-slide>
<!-- 根据情况引入控件 -->
// 底部按钮
<div class="swiper-pagination" slot="pagination"></div>
// 上一张按钮
<div class="swiper-button-prev" slot="button-prev"></div>
// 下一张按钮
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
Script 使用
export default {
data(){
return{
swiperOption: {
spaceBetween: 15, // 图片之间的间距
centeredSlides: true, // 居中还是从图1开始
slidesPerView: 'auto', // 一屏幕显示几个? 数字或者默认 auto 自动。
notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件
// loop: true, // 循环吗
initialSlide: 0, // 从第几个开始
autoplay: {
delay: 5000, // 等5秒下一个
disableOnInteraction: false // 中间滑动一下，取消自动吗？
},
pagination: {
el: '.swiper-pagination',
clickable: true
}, // 下按钮
speed: 800, // 滑动时候动画的速度
paginationClickable: true, // 下面按钮让点吗
navigation: {
prevEl: '.swiper-button-prev', // 左侧按钮
nextEl: '.swiper-button-next' // 右侧按钮
},
effect: 'fade', // 渐入效果
watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
watchSlidesVisibility: true // 先要开启watchSlidesProgress参数，如果开启watchSlidesVisibility，则会在每个slide增加一个指示该slide的progress值得classname
// autoHeight: true // 图片高度自适应
},
mdv:[], // 存放图片数据的数组
}
}
写到这里，轮播图就基本呈现出来了。如果我们想要一个比较有画面冲击感的视觉效果，可以适当加入一些css3动画。
CSS 使用
**下面我写一段css的代码来实现我想要的效果
** 重点：
watchSlidesProgress: true,watchSlidesVisibility: true 一定要开启，因为会在每个slide增加一个指示该slide的progress值得classname，我们就可以在当前轮播的类下面加入我们想要实现的图片transform: scale(1)效果
@keyframes blurFadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.swiper-slide {
width: 100%;
height: 579px;
img {
width: 100%;
// height: 100%;
min-height: 310px;
transform: scale(1);
transition: ease all 1.8s;
object-fit: cover;
}
}
.swiper-slide-visible {
img {
transform: scale(1.2);
transition: ease all 1.8s;
}
.banner-inner {
.title-box {
color: #333333;
font-weight: 600;
font-size: 36px;
margin-top: 125px;
margin-bottom: 23px;
animation: blurFadeIn 0.4s backwards;
animation-delay: 0.8s;
}
.content-box {
color: #666666;
font-size: 24px;
margin-bottom: 45px;
animation: blurFadeIn 0.6s backwards;
animation-delay: 1s;
}
.toSeeDetail {
width: 152px;
font-size: 16px;
height: 40px;
animation: blurFadeIn 0.8s backwards;
animation-delay: 1.2s;
}
}
}
.swiper-slide-active {
height: auto;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 115px;
left: 0;
width: 100%;
}
总结
vue2中不能使用最新版本的Swiper，因此，插件包版本一定要下载正确，不然会报一堆找不到包的错误。这也是我在项目中，自己研究出来的一种方案，如果有更好的方案欢迎在评论区留言，一起探讨哈。
