基于Swiper2的fade切换效果
本帖最后由 xiaolu289 于 2018-7-2 09:52 编辑基于swiper2实现的fade切换插件 开发背景: 因为swiper3并不兼容IE8,而swiper2能够兼容IE8,但是在swiper2下,当时我并没有找到有实现fade效果的插件,因此,就自己动手造了一个,使用非常简单:
var mySwiper = new Swiper('.swiper-container',{
fade: true,
})
也可以配合animate插件一起使用,可以看我的案例展示
var mySwiper = new Swiper('.swiper-container',{
fade: true,
// loop: true,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
});
github地址:https://github.com/xiaolu289/swiper2.fade
赞!已收藏 不兼容ie9有解决方法吗 JoyEcho 发表于 2019-3-27 09:02
不兼容ie9有解决方法吗
终于搞好了,其实很简单,完美实现swiper2 的fade切换效果,兼容性极好
<script>
var mySwiper = new Swiper('.swiper-container',{
speed:0,
})
</script>
<style>
.swiper-slide{ opacity:0; transition:2s; -transition:2s;}
.swiper-slide-active{ opacity:1;}
</style>
页:
[1]