html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

秒速五厘米 2022-10-06 11:43 223阅读 0赞

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下

效果如图：

![20201016101841397.jpg][]

首先引入swiper的css和js文件

官网下载地址

html结构部分

slider1

slider2

slider1

slider2

js部分

var tabItem = $('.tab .tabItem');

var mySwiper = new Swiper('.swiper-container', \{

autoplay: false,

on:\{

//swiper从当前slide开始过渡到另一个slide时执行

slideChangeTransitionStart: function()\{

var n = this.activeIndex;//过渡后的slide索引

changeTab(n);

\}

\}

\})

//tab点击切换silde

tabItem.click(function()\{

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

changeTab(ind);

mySwiper.slideTo(ind);

\})

//tab切换样式

function changeTab(index)\{

tabItem.removeClass('active').eq(index).addClass('active');

\}

css部分

html,body\{width: 100%;height: 100%;\}

div\{margin: 0;padding: 0;\}

.swiper-container,.swiper-wrapper,.swiper-slide\{width: 100%;height: 100%;\}

.swiper-slide\{display: flex;align-items: center;justify-content: space-around;\}

.tab\{width: 100%;height: 50px;overflow: hidden;border-bottom: 1px solid \#eee;position: fixed;top: 0;left: 0;z-index: 999;\}

.tabItem\{width: 50%;height: 50px;float: left;background: \#e5e5e5;line-height: 50px;text-align: center;\}

.active\{background: \#FE2D26;\}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2020-10-13

[20201016101841397.jpg]: https://zsrimg.ikafan.com/file_images/article/202010/20201016101841397.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关滑动导航栏（PagerSlidingTabStrip）实践

本篇介绍另一个开源项目滑动导航栏（PagerSlidingTabStrip）。 1. 开源项目PagerSlidingTabStrip地址： [http

分手后的思念是犯贱/ 2023年10月16日 21:42/ 0 赞/ 54 阅读

相关滑动导航栏效果 html+css+js

一.先看效果（完整代码在最后）： ![在这里插入图片描述][20210501193422872.gif_pic_center] 实现并不难，但是初学 js 时拿来练手

超、凢脫俗/ 2023年01月18日 06:47/ 0 赞/ 180 阅读

相关 HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果 ![在这里插入图片描述][20201230172825172.png] ![在这里插入图片描述][20201230172715552.gi

今天药忘吃喽~/ 2023年01月01日 02:48/ 0 赞/ 316 阅读

相关移动端使用Swiper实现左右滑动切换内容

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

青旅半醒/ 2022年12月19日 09:26/ 0 赞/ 459 阅读

相关可滑动移动端tab选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten

川长思鸟来/ 2022年12月08日 04:48/ 0 赞/ 234 阅读

相关 Vue实现tab导航栏，支持左右滑动

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。 tab

我就是我/ 2022年10月10日 11:13/ 0 赞/ 143 阅读

相关 html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下效果如图： ![20201016101841397.jpg][] 首先引入swiper的css和j

秒速五厘米/ 2022年10月06日 11:43/ 0 赞/ 224 阅读

相关 jquery 实现导航栏滑动效果

原文：[http://www.cnblogs.com/WebMobile/p/3926921.html][http_www.cnblogs.com_WebMobile_p_39

向右看齐/ 2022年08月11日 06:28/ 0 赞/ 300 阅读

相关原生js写头部tab栏左右滑动支持移动端

前面有一篇功能较完善的，但是是jq和原生混搭的，有朋友只需要原生的，就做了个简单的； 1.css {margin: 0; padding: 0; box-sizin

ゝ一世哀愁。/ 2022年06月09日 08:55/ 0 赞/ 304 阅读

相关移动端滑动

前言移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。小插件

以你之姓@/ 2022年05月30日 08:45/ 0 赞/ 356 阅读