swiper移动端选项卡_swiper移动端导航栏滑动切换选项卡代
码
特效描述：swiper 移动端导航栏 滑动切换选项卡。swiper.js制作⼿机移动端导航滑动tab选项卡切换代码
代码结构
1. 引⼊CSS
2. 引⼊JS
3. HTML代码
推荐
菜单 2
菜单 3
菜单 4
菜单 5
菜单 6
菜单 7
菜单 8
菜单 9
菜单 10
上⾯导航栏可以滑动
上⾯导航栏可以滑动2222
内容 213213123
内容 ressssssss
内容 ffffffffffff
内容 bbbbbbbbbbbbbbbbbvb
内容 bvcccccccccccbvb
内容 sdasdssssss
内容 oiouiouioiuoiuo
内容 m,jnkjhkhgjghjugh
$(function() {
function setCurrentSlide(ele, index) {
$(".swiper1 .swiper-slide").removeClass("selected");
ele.addClass("selected");
//swiper1.initialSlide=index;
}
导航菜单
var swiper1 = new Swiper('.swiper1', {
//设置slider容器能够同时显⽰的slides数量(carousel模式)。
//可以设置为number或者 'auto'则⾃动根据slides的宽度来设定数量。
//loop模式下如果设置为'auto'还需要设置另外⼀个参数loopedSlides。
slidesPerView: 5.5,
paginationClickable: true,//此参数设置为true时，点击分页器的指⽰点分页器会控制Swiper切换。
spaceBetween: 10,//slide之间的距离(单位px)。
freeMode: true,//默认为false，普通模式：slide滑动时只滑动⼀格，并⾃动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
loop: false,//是否可循环
onTab: function(swiper) {
var n = swiper1.clickedIndex;
}
});
swiper1.slides.each(function(index, val) {
var ele = $(this);
<("click", function() {
setCurrentSlide(ele, index);
swiper2.slideTo(index, 500, false);
//mySwiper.initialSlide=index;
});
});
var swiper2 = new Swiper('.swiper2', {
/
/freeModeSticky 设置为true 滑动会⾃动贴合
direction: 'horizontal',//Slides的滑动⽅向，可设置⽔平(horizontal)或垂直(vertical)。
loop: false,
//effect : 'fade',//淡⼊
//effect : 'cube',//⽅块
//effect : 'coverflow',//3D流
//effect : 'flip',//3D翻转
autoHeight: true,//⾃动⾼度。设置为true时，wrapper和container会随着当前slide的⾼度⽽发⽣变化。onSlideChangeEnd: function(swiper) { //回调函数，swiper从⼀个slide过渡到另⼀个slide结束时执⾏。var n = swiper.activeIndex;
setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
swiper1.slideTo(n, 500, false);
}
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。