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

swiper嵌套tab问题解决

发表于 11-30 13:31 显示全部楼层 10 96

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 


提取码回复本帖子可见。


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





  



回复 使用道具
举报
xtmvu81

发表于 12-08 16:13 显示全部楼层

找神武交易平台哪个安全吗?就上谷谷交易平台
回复 支持 反对 使用道具
举报
焯纽潼悟

发表于 12-04 01:34 显示全部楼层

不限流量不限网速,山区、农村、城镇高速免费上网不花钱!最新9500WG接收信号高达19公里,无论您身在地球任何一个角落,都能搜到信号实现免费上网,最新软件全自动智能管理,信号强,网速快,优先自动连接上网,免去您任何手动繁琐作,保证让您高速上网免费不花钱就是这么简单! 朋友们,您还在为家里装修要拉网线烦恼吗?还在忧愁每年交昂贵网费吗?还在苦恼出差无法上网吗?还在傻傻节省4G流量每月还要高达几十元流量费吗?还在敢怒不敢言的公司、学校、宿舍限制上网吗?还在苦逼每天站在阳台高举手机为了搜一个wifi吗?世界上最遥远的距离是明明有wifi,却用不了是多么痛苦的事!玩一会王者荣耀没了几个G的流量,看了一会视频,没了几个G的流量,壕!?还是无奈!?明明很节省,没用少则几十元多则上百元的流量费,如此高昂的费用是不是让您皱眉呢?没关系,用最新9500WG永久免费上网吧!只要238元让您永久免费上网不花钱,无需电脑,无需布线,只需插电,电脑、手机、平板免费上网就是这么任性,wifi信号覆盖高达19公里,无需站阳台,无需放窗外,想在哪里就在哪里!信号强,网速快,免费上网,能免则免,免费到底! 免费热线:188-2652-1502 客服QQ:1094201567 官网 www.ccyxf.com 9500WG
回复 支持 反对 使用道具
举报
G.ajc

发表于 12-03 18:26 显示全部楼层

必须支持的

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

发表于 12-02 16:20 显示全部楼层

回复 支持 反对 使用道具
举报
中二的我

发表于 12-02 01:59 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
顾唐

发表于 11-30 18:14 显示全部楼层

回复 支持 反对 使用道具
举报
夕夕要努力

发表于 11-30 14:23 显示全部楼层

活跃活跃论坛气氛~求楼主加好友

回复 支持 反对 使用道具
举报
晴天屁屁

发表于 11-30 13:55 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
昨夜一厕狼

发表于 11-30 13:44 显示全部楼层

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

发表新文章
欧水萍

小码哥名师团队

0

学分

1651

学币

1813

积分

小码哥名师团队

Rank: 5Rank: 5

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

精彩推荐

  • 关注小码哥教育