使用Swiperable tabs 切换效果-----(swiper tab 滑动切换)
2021/10/29 6:09:40
本文主要是介绍使用Swiperable tabs 切换效果-----(swiper tab 滑动切换),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Github上的案例:
效果图如下:
代码如下:
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Swipeable Tabs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/css/swiper.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="intro"> <h1>Swipeable Tabs</h1> <p>[Android - Material Design]</br>made by <a href="https://github.com/nolimits4web/Swiper">swiperjs</p> </div> <div class="swiper-container"> <!-- Add Pagination --> <div class="swiper-pagination"> </div> <div class="swiper-wrapper"> <div class="swiper-slide">Tab 1</div> <div class="swiper-slide">Tab 2</div> <div class="swiper-slide">Tab 3</div> <div class="swiper-slide">Tab 4</div> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.2/js/swiper.min.js'></script><script src="./script.js"></script> </body> </html>
CSS代码:
:root { box-sizing: border-box; font-size: 62.5%; } *, *::before, *::after { box-sizing: inherit; } body { background-color: #745E73; color: #fff; margin: 0; -webkit-font-smoothing: antialiased; } a { text-decoration: none; } .intro { text-align: center; } .intro h1 { color: #EFEFEF; font-size: 3rem; margin: 60px 0 0; font-weight: bold; font-family: monospace; } @media screen and (min-width: 800px) { .intro h1 { font-size: 4rem; } } .intro p { color: #E0CF79; font-size: 1.3rem; line-height: 1.5; } .intro a { color: #40DFBB; font-weight: bold; text-decoration: none; } .swiper-container { width: 100%; height: 100%; margin: 50px auto 0; } @media screen and (min-width: 800px) { .swiper-container { width: 70%; margin-left: 15%; } } .swiper-slide { background: #fff; color: #333; font-size: 1.8rem; min-height: 300px; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-container-horizontal > .swiper-pagination { top: 0; bottom: auto; } .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { margin: 0; } .active-mark { background: #ffeb3b; width: 25%; height: 4px; position: absolute; left: 0; top: 52px; transition: left 0.2s ease-out; } .swiper-pagination-bullet { background-color: #00D42B; border-radius: 0; box-sizing: border-box; color: #0e8927; cursor: pointer; font-size: 1.6rem; font-weight: normal; opacity: 1; height: 56px; width: 25%; display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: font-weight 0.22s ease; } .swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active ~ .active-mark { left: 0%; } .swiper-pagination-bullet:nth-of-type(2).swiper-pagination-bullet-active ~ .active-mark { left: 25%; } .swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active ~ .active-mark { left: 50%; } .swiper-pagination-bullet:nth-of-type(4).swiper-pagination-bullet-active ~ .active-mark { left: 75%; } .swiper-pagination-bullet:first-of-type.swiper-pagination-bullet-active ~ .active-mark { left: 0; } .swiper-pagination-bullet-active { font-weight: bold; }
Javscript代码:
var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 1, paginationClickable: true, loop: true, paginationBulletRender: function (index, className) { var tabsName = ['Apps', 'Tricks', 'News', 'Games']; if ( index === (tabsName.length - 1) ) { return '<span class="' + className + '">' + tabsName[index] + '</span>' + '<div class="active-mark "></div>'; } return '<span class="' + className + '">' + tabsName[index] + '</span>'; } });
这篇关于使用Swiperable tabs 切换效果-----(swiper tab 滑动切换)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)