安装
npm i swiper@5.4.1 --save
使用
- 修改
src/main.js，引入css文件
import 'swiper/css/swiper.min.css'
HTML代码
<div class="swiper-container" ref="swiperContainer">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- ... -->
</div>
<div class="swiper-slide">
<!-- ... -->
</div>
<!-- .... -->
</div>
<div class="swiper-slide"></div>
</div>
JS代码
import Swiper from 'swiper'
// ...
export default {
data() {
return {
swiper: null,
// ...
}
},
mounted() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
initialSlide: 0,
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
}
})
},
// ...
}
配合animate.css
-
参考文档：Swiper Animate使用方法
-
下载
swiper.animate.min.js，放在public/js/目录下 -
修改
public/index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script type="text/javascript" src="./js/swiper.animate1.0.3.min.js"></script>
</body>
</html>
-
安装
animate.css：npm i animate.css --save -
修改
src/main.js文件，引入animate.css
import 'swiper/css/swiper.min.css'
import 'animate.min.css'
HTML代码：在需要运动的元素上面增加类名ani，并指定swiper-animate-effect
<!--
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
-->
<div class="swiper-container" ref="swiperContainer">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- ... -->
<div class="page3-md ani" swiper-animate-effect="flipInY" swiper-animate-delay="0.5s"></div>
</div>
<div class="swiper-slide">
<!-- ... -->
</div>
<!-- .... -->
</div>
<div class="swiper-slide"></div>
</div>
JS代码
import Swiper from 'swiper'
// ...
export default {
data() {
return {
swiper: null,
page: 0,
// ...
}
},
mounted() {
const _this = this
this.swiper = new Swiper(this.$refs.swiperContainer, {
initialSlide: 0,
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
},
init: function () {
// 隐藏动画元素
window.swiperAnimateCache(this)
// 初始化完成开始动画
window.swiperAnimate(this)
},
slideChange: function () {
_this.page = this.activeIndex
// 每个slide切换结束时也运行当前slide动画
window.swiperAnimate(this)
// 动画只展现一次，去除ani类名
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani')
}
})
},
// ...
}
发表评论