本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下
首先导入
(这里用的是Swiper 4.0.7版本)
在写入html内容
商品分类
手机厨具数码家纺生鲜家用电器食品饮料电脑/办公家用日用手机厨具数码家纺生鲜家用电器食品饮料电脑/办公家用日用最后调用swiper
var myNav = new Swiper('#nav', {
spaceBetween: 10,
slidesPerView : 3,
watchSlidesProgress : true,
watchSlidesVisibility : true,
on:{
tap: function(){
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page',{
on:{
slideChangeTransitionStart: function(){
updateNavPosition()
}}
})
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>myNav.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
myNav.slideTo(activeNav.index())
}
}
}
全部代码如下：
商品分类
*{padding:0;margin:0;font-size:20px;color:#333;}
html{background:#fff;}
a{text-decoration:none;}
body{max-width:640px;margin:0 auto;position:relative;background:#ccc;overflow:hidden;}
img{width:100%;border:0;}
li{list-style:none;}
.head-top{height:36px;position:fixed;top:0;left:0;text-align:center;width:100%;line-height:36px;}
.swiper-containee{max-width:640px;}
#nav{margin-top:36px;border-bottom:1px solid #999;padding:10px;}
#nav li{text-align:center;}
.active-nav{
color:#fff;
background:#ddd !important;
}
.active-nav a{
color:#fff;
background:#ddd !important;
}
#page .swiper-slide{height:6rem;}
商品分类
手机厨具数码家纺生鲜家用电器食品饮料电脑/办公家用日用手机厨具数码家纺生鲜家用电器食品饮料电脑/办公家用日用var myNav = new Swiper('#nav', {
spaceBetween: 10,
slidesPerView : 3,
watchSlidesProgress : true,
watchSlidesVisibility : true,
on:{
tap: function(){
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page',{
on:{
slideChangeTransitionStart: function(){
updateNavPosition()
}}
})
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>myNav.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
myNav.slideTo(activeNav.index())
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
