jquery+swiper实现时间轴tab滑动切换显示效果

根据时间轴切换tab页面内容？下面这篇文章介绍了jquery时间轴tab切换效果，结合swiper实现滑动显示效果的方法，希望对大家有所帮助！

需求：tab页面内容按时间轴切换(时间轴需要滑动查看并选择)

实现思路：

结合swiper插件实现滑动显示效果

根据transform: translatex实现左侧切换效果(具体css如下)，实现非滚动点击切换效果，结合swiper进行修改。【相关教程推荐:jquery教程】

实现效果：

实现代码：需要与swiper组件配合使用；左侧导航是根据html结构和css3代码产生的时间轴效果来自httper://www.htmleaf.com/css3/ui-design/201911275850.html

Swiper基本演示地址：https://www.swiper.com.cn/demo/index.html

HTML: