0
点赞
收藏
分享

微信扫一扫

swiper.animate实现轮播展示动画效果

非宁静不致远 2022-07-12 阅读 76


swiper.animate实现轮播展示动画效果_css

<!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>


举报

相关推荐

0 条评论