swiper 自定义的一些需求
作者:互联网
给每个元素不同的停留时间
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide diyi" data-swiper-autoplay="500" swiper-animate-effect="fadeOut" ><img src="static/images/tu1.jpg"></div>
<div class="swiper-slide video" data-swiper-autoplay="24000">
<video width="100%" height="100%" autoplay>
<source src="static/test.mp4" type="video/mp4">
您的浏览器不支持Video标签。
</video>
</div>
<div class="swiper-slide" data-swiper-autoplay="5000"><img src="static/images/tu2.jpg"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
让某些元只轮播一次
<script>
var mySwiper = new Swiper('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名
}},
loop : true,
speed:1000,
autoplay : {
delay:5000
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
setInterval(function(){
$(".swiper-wrapper .video").remove();
$(".swiper-wrapper .diyi").attr("data-swiper-autoplay","5000");;
mySwiper.update(true);
},24500);
</script>
标签:需求,动画,5000,自定义,function,ani,wrapper,swiper 来源: https://www.cnblogs.com/cn-oldboy/p/12956101.html