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- 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- 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>'; } });