swiper轮播 + animate动画 , 加载到轮播后播放当前轮播页动画

遇到的问题:

1.只有第一个动画播放了,后面的不播放动画

　　　　原因 : 还没完全加载到轮播,动画就已经播放完了

              解决方案 : 加一秒动画延迟

引入文件

<-- css -->
<link rel="stylesheet" type="text/css" href="/static/readme/animate.css?id={$version}">
<link type="text/css" rel="stylesheet" href="/static/swiper-5.4.5/package/css/swiper.min.css" />
<-- js -->
<script src='/static/common/js/jquery.js'></script>
<script src="/static/swiper-5.4.5/package/js/swiper.min.js"></script>
<script src="/static/readme/swiper.animate.min.js"></script>

 html

<!-- banner轮播 -->
	<section class="banner">
		<div class='swiper-container' id='banner'>
            <div class='swiper-wrapper'>
                <div class='swiper-slide' style="background-image: url('https://www.1558.cn/template/pc/index/images/80cbe1f347a03636bb8e109d165b73ff.jpg')">
                	<div class="banner_text">
                		<h1 class="index_swiper_tit  ">每一个客户我们都鼎力相助</h1>
	                	<h3 class="index_swiper_h3 ">助力每个人梦想实现</h3>
	                	<div class="index_swiper_btn  ">了解更多案例</div>
                	</div>
                </div>
                <div class='swiper-slide' style="background-image: url('https://www.1558.cn/template/pc/index/images/80cbe1f347a03636bb8e109d165b73ff.jpg')">
                	<div class="banner_text">
                		<h1 class="index_swiper_tit  ">每一个客户我们都鼎力相助</h1>
	                	<h3 class="index_swiper_h3 ">助力每个人梦想实现</h3>
	                	<div class="index_swiper_btn  ">了解更多案例</div>
                	</div>
                </div>
            </div>
            <div class='swiper-pagination'></div>
        </div>
	</section>

 css

.banner .swiper-wrapper .swiper-slide .banner_text .index_swiper_tit{
	font-size: 60px;
	text-shadow: 0 2px 2px #333;
	font-weight: bold;
	line-height: 79px;
	margin: 50px auto;
	-webkit-animation-delay: 1s;
}
.banner .swiper-wrapper .swiper-slide .banner_text .index_swiper_h3{
	font-size: 26px;
	text-shadow: 0 2px 2px #333;
	line-height: 35px;
	-webkit-animation-delay: 1.5s;
}
.banner .swiper-wrapper .swiper-slide .banner_text .index_swiper_btn{
	display: inline-block;
	font-size: 18px;
	padding: 5px 36px;
	line-height: 43px;
	margin-top: 40px;
	border: 1px solid #fff;
	border-radius: 25px;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 2s;
}

 js

//轮播 swiper组件
window.onload= function(){
	var mySwiper = new Swiper ('.swiper-container', {
			effect:'coverflow',          //滑动效果
			touchAngle : 0,          //滑动的角度超过30度无效
			// 轮播图的方向，也可以是vertical方向
			direction:'horizontal',
	        //环形切换
	        loop: true,
	        // 切换的速度
	        speed:900,             //滑动或者自动换页时的速度
	        // 如果需要分页器
	        pagination: {
	            el: '.swiper-pagination',
	            clickable:true,
	            type:'bullets',
	        },
	        paginationClickable:true,
	        //自动轮播
	        autoplay: { 
	        	disableOnInteraction: false ,
	        	delay: 5000,
	        },
	　　　　　　 // 这样，即使我们滑动之后， 定时器也不会被清除
	　　　　   autoplayDisableOnInteraction : false,
			//滑动调用该方法
	        on: {  
	        	init: function(){
			        $(".index_swiper_tit").eq(0).addClass('animated fadeInUp')
	                $(".index_swiper_h3").eq(0).addClass('animated fadeInUp')
	                $(".index_swiper_btn").eq(0).addClass('animated fadeInUp')
			    }, 
			    slideChangeTransitionStart: function(e){
			    	var slide = this.activeIndex;
	                $(".index_swiper_tit").removeClass('animated fadeInUp')
	                $(".index_swiper_h3").removeClass('animated fadeInUp')
	                $(".index_swiper_btn").removeClass('animated fadeInUp')

	                $(".index_swiper_tit").eq(slide).addClass('animated fadeInUp')
	                $(".index_swiper_h3").eq(slide).addClass('animated fadeInUp')
	                $(".index_swiper_btn").eq(slide).addClass('animated fadeInUp')
	            },
	        },  
	    });
		mySwiper.pagination.bullets.css('background','white');  
}

标签：动画,轮播,index,slide,animate,animated,fadeInUp,swiper
来源： https://www.cnblogs.com/gyrgyr/p/14612210.html