swiper4实现移动端导航切换资源-CSDN文库

swiper4实现移动端导航切换实现移动端导航切换

主要为大家详细介绍了swiper4实现移动端导航切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下

首先导入

在写入html内容

</div>

</ul>

</div>

</div>

最后调用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())

}

</script>

全部代码如下：

<!DOCTYPE html>

<head>

<style>

*{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;}

</style>

</head>

<body>

</div>

swiper4实现移动端导航切换

Swiper移动端选项卡切换

swiper移动端左右滑动与a标签链接接同时触发解决方案

swiper移动端滑动切换选项卡代码.zip

滑动时切换页面,同时页面显示导航点进行导航,实现联动与导航效果

触屏滑动swiper选项卡tab标签切换效果

HTML5+SWIPER仿网易新闻横滑翻页及联动

自适应宽度背景跟随滑动导航

不用锚点也可以平滑滚动到页面的指定位置实现代码

Swiper 移动端tab切换+滑动自适应

Swiper 和 TweenMax 移动端实战 源码

swiper移动端触屏滑动图片轮播切换代码.zip

swiper移动端滑动切换选项卡特效代码

基于Swiper实现移动端页面图片轮播效果

jQuery实现swiper移动端滑动式导航特效.zip

手机端H5_swiper_动画.zip

swiper手机移动端触屏滑动选项卡

Swiper.js实现移动端元素左右滑动

vue使用swiper实现左右滑动切换图片

swiper+jquery制作的移动端日期选择器

swiper-tfboys

基于swiper模拟移动端下拉框

js使用swiper实现层叠轮播效果实例代码

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

XCP协议的规范文档

GD32替换STM32注意事项.pdf

NPPJSONViewer.zip

最新资源

Swiper 和 TweenMax 移动端实战源码

Qt 5实现串口调试助手（源工程文件、0积分下载）