请选择 进入手机版 | 继续访问电脑版

swiper嵌套tab问题解决

发表于 2017-11-30 13:31 显示全部楼层 17 452

swiper嵌套tab问题解决

        swiper是一个主要针对移动端的轻量级框架,主要是实现多样化的滑动切换功能,demo如下图:


swiper.gif


        注意swiper在和标签页tab嵌套使用的时候,会存在问题,就是swiper的父元素是隐藏的时候,swiper调用代码不会自动执行,解决这个问题可以用到swiper的监测参数:


官方api链接:


http://www.swiper.com.cn/api/Observer/2015/0308/218.html


observeParents

将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。


observer

启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。

默认false,不开启,可以使用update()方法更新。


        但是这个参数并不能解决所有问题,如果要使用自动播放和其他相关功能时,依然会存在问题,那么怎样彻底解决swiper和标签页tab嵌套使用的问题呢?其实可以通过写代码判断,当swiper父元素是显示的时候,才调用swiper初始化的代码。


        只需要在调用swiper的时候稍微写下判断再调用就ok,代码如下:



<script>


//oswiper1初始化

var mySwiper1 = new Swiper('#oswiper1',{

pagination : '.swiper-pagination',

slidesPerView: 3,

centeredSlides: true,

loop:true,

autoplay:2000

});


//oswiper1鼠标移上停止自动

var oswiper1 = document.getElementById("oswiper1");

oswiper1.onmouseover = function(){

mySwiper1.stopAutoplay();

}

oswiper1.onmouseout = function(){

mySwiper1.startAutoplay();

}



//tab切换

$(".tab ol li").click(function(){


//tab切换

$(this).addClass("current").siblings().removeClass("current");

var index = $(this).index();

$(".tab ul li").eq(index).addClass("current").siblings().removeClass("current");

//根据索引调用swiper初始化代码

if(index==0){

var mySwiper1 = new Swiper('#oswiper1',{

slidesPerView: 3,

centeredSlides: true,

loop:true,

autoplay:2000

});

}else if(index==1){

var mySwiper2 = new Swiper('#oswiper2',{

slidesPerView: 3,

centeredSlides: true,

loop:true,

autoplay:2000,

effect:'coverflow',

coverflow: {

rotate: 30,

stretch: 10,

depth: 60,

modifier: 2,

slideShadows : true

}

});

var oswiper2 = document.getElementById("oswiper2");

oswiper2.onmouseover = function(){

mySwiper2.stopAutoplay();

}

oswiper2.onmouseout = function(){

mySwiper2.startAutoplay();

}

}else{

var mySwiper3 = new Swiper('#oswiper3',{

loop:true,

autoplay:2000,

speed:2000,

effect : 'cube',

cube: {

  slideShadows: true,

  shadow: true,

  shadowOffset: 100,

  shadowScale: 0.6

}

});

var oswiper3 = document.getElementById("oswiper3");

oswiper3.onmouseover = function(){

mySwiper3.stopAutoplay();

}

oswiper3.onmouseout = function(){

mySwiper3.startAutoplay();

}

}

});


</script>



最后,奉上案例源文件:


下载链接: https://pan.baidu.com/s/1pLKEWoN 


提取码回复本帖子可见。


游客,如果您要查看本帖隐藏内容请回复





  



回复 使用道具
举报
设计师傅

发表于 04-10 13:28 显示全部楼层

回复 支持 反对 使用道具
举报
卖水果的阿甘

发表于 02-06 13:30 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
东风玖哥

发表于 01-29 11:00 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
纯银

发表于 01-21 07:27 显示全部楼层

别人说是金子总要发光的,我就来看看。

回复 支持 反对 使用道具
举报
oygza

发表于 01-11 16:24 显示全部楼层

回复 支持 反对 使用道具
举报
孵梦Reve

发表于 01-07 18:11 显示全部楼层

回复 支持 反对 使用道具
举报
cocoabird

发表于 01-01 05:49 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
荣婳

发表于 2017-12-28 18:24 显示全部楼层

楼主你好

回复 支持 反对 使用道具
举报
金夜威尼香

发表于 2017-12-15 21:40 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1799

学币

1970

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1970
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育