swiper选项卡还可以左右滑动，最后一个直接跳转链接
Posted huanghuali
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swiper选项卡还可以左右滑动，最后一个直接跳转链接相关的知识，希望对你有一定的参考价值。
整理分享：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css"> <style> *margin:0;padding:0 body,html max-width: 640px; margin: 0 auto; background-color: #ebebeb; a text-decoration: none; color: #333 lilist-style:none .swiper_tab overflow: hidden; font-size: 18px; font-weight: 700; background-color: #fff; height: 40px; line-height: 40px; overflow: hidden; text-align: center; .swiper_ul_wrapwidth: 86%; float: left; .swiper_uldisplay:flex;width:100%;flex-direction:row;justify-content:center;align-items:center .swiper_ul lidisplay:flex;display:-webkit-flex;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center; position: relative; padding:0 10px; .swiper_ul li:after content: ""; position: absolute; right: 1px; height:17px; width: 1px; background-color: #ebebeb .swiper_ul li.active spanposition: relative; color: #e82e2e; .swiper_ul li.active span:before content: ""; position: absolute; left:0; bottom:0; width: 100%; height: 3px; background-color: #e82e2e .swiper_ul_lastwidth: 14%; float: left; .swiper-slide-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px </style> </head> <body> <div class="swiper_tab_wrap" id="swiperTabWrap"> <div class="swiper_tab"> <div class="swiper_ul_wrap"> <ul class="swiper_ul"> <li class="active"><span>推荐</span></li> <li><span>生肖</span></li> <li><span>看相</span></li> <li><span>风水</span></li> <li><span>取名</span></li> <li><span>八字</span></li> </ul> </div> <a href="https://cs.fuyuandian.com" class="swiper_ul_last"><span>商城</span></a> </div> <div class="swiper-container" id="swiperTabCon"> <div class="swiper-wrapper"> <div class="swiper-slide">内容1</div> <div class="swiper-slide">内容2</div> <div class="swiper-slide">内容3</div> <div class="swiper-slide">内容14</div> <div class="swiper-slide">内容15</div> <div class="swiper-slide">内容16</div> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script> <script type="text/javascript"> var swiper = new Swiper(‘#swiperTabCon‘, speed: 500, on: slideChangeTransitionStart: function() //swiper从当前slide开始过渡到另一个slide时执行 var index = swiper.activeIndex; $(‘#swiperTabWrap ul li‘).removeClass(‘active‘).eq(index).addClass(‘active‘); ); $(‘#swiperTabWrap ul li‘).on(‘click‘, function(e) e.preventDefault(); //得到当前索引 var i = $(this).index(); $(‘#swiperTabWrap ul li‘).removeClass(‘active‘).eq(i).addClass(‘active‘); swiper.slideTo(i, 1000, false); ); </script> </body> </html>
效果如图：
参考swiper一些涉及的属性：
https://www.swiper.com.cn/api/event/91.html
https://www.swiper.com.cn/api/methods/109.html
以上是关于swiper选项卡还可以左右滑动，最后一个直接跳转链接的主要内容，如果未能解决你的问题，请参考以下文章
移动端swiper做页面切换，如何让做最后一页滑动时回到第一页