swiper.animate实现轮播展示动画效果
swiper.animate实现轮播展示动画效果
明知山
发布于 2020-09-03 10:55:11
发布于 2020-09-03 10:55:11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.4.1/css/swiper.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
<style>
html,
body {
position: relative;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
font-size: 20px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="ani" swiper-animate-effect="fadeInUp"
src="https://sucai.suoluomei.cn/sucai_zs/images/20191110135715-b7.jpg" alt="">
<div class="ani text" swiper-animate-effect="fadeInUp">第一第一文字占位</div>
</div>
<div class="swiper-slide">
<img class="ani" swiper-animate-effect="fadeInUp"
src="https://sucai.suoluomei.cn/sucai_zs/images/20191231093620-1.jpg" alt="">
<div class="ani text" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
swiper-animate-delay="1s">第二第二文字占位</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.4.1/js/swiper.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/swiper.animate/1.0.3/1.0.3.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
preventInteractionOnTransition: true,
on: {
init: function () {
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function () {
swiperAnimate(this);
}
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-01-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读