swiper和tab相结合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>swiper和tab相结合</title> <link href="https://files.cnblogs.com/files/heyiming/swiper3.3.1.min.css" rel="stylesheet" type="text/css"> <script src="files/heyiming/jquery-1.8.0.min.js"></script> <script src="files.cnblogs.com/files/heyiming/swiper3.3.1.min.js"></script> <body> <style type="text/css"> #swiper-tab .swiper-slide{ line-height:2 !important; color:#666 !important; font-size:14px !important; background:#eee !important; } #swiper-tab .active-nav{ background:red !important; } /*tabs文字居中*/ #swiper-tab{ text-align: center; } /*给con部分加上一个背景色*/ #swiper-con{ background: yellow; height:300px; } </style> <!--swiper-tab区域--> <div class="swiper-container swiper-container-horizontal" id="swiper-tab" style="width:480px;"> <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-800px, 0px, 0px);"> <div class="swiper-slide" style="width: 160px;">版块1</div> <div class="swiper-slide" style="width: 160px;">版块2</div> <div class="swiper-slide" style="width: 160px;">版块3</div> <div class="swiper-slide" style="width: 160px;">版块4</div> <div class="swiper-slide swiper-slide-prev" style="width: 160px;">版块5</div> <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 160px;">版块6</div> <div class="swiper-slide swiper-slide-visible swiper-slide-next" style="width: 160px;">版块7</div> <div class="swiper-slide active-nav swiper-slide-visible" style="width: 160px;">版块8</div> </div> </div> <!--swiper-tab区域--> <!--swiper-con区域--> <div class="swiper-container swiper-container-horizontal" id="swiper-con" style="width:480px;"> <div class="swiper-wrapper" style="transform: translate3d(-3360px, 0px, 0px); transition-duration: 0ms;"> <div class="swiper-slide blue-slide" style="width: 480px;">slider1</div> <div class="swiper-slide red-slide" style="width: 480px;">slider2</div> <div class="swiper-slide orange-slide" style="width: 480px;">slider3</div> <div class="swiper-slide blue-slide" style="width: 480px;">slider4</div> <div class="swiper-slide red-slide" style="width: 480px;">slider5</div> <div class="swiper-slide orange-slide" style="width: 480px;">slider6</div> <div class="swiper-slide blue-slide swiper-slide-prev" style="width: 480px;">slider7</div> <div class="swiper-slide red-slide swiper-slide-active" style="width: 480px;">slider8</div> </div> </div> <!--swiper-con区域--> <script> var mySwiper2 = new Swiper('#swiper-tab',{ watchSlidesProgress : true,//开启这个参数来计算每个slide的progress(进度) 对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，
从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3。对于swiper的progress属性，活动的slide在最左（上）边时为0，活动的slide在最右（下）边时为1，其他情况平分。例：有6个slide，
当活动的是第三个时swiper的progress属性是0.4，当活动的是第五个时swiper的progress属性是0.8。swiper的progress其实就是wrapper的translate值的百分值，与activeIndex等属性不同，
progress是随着swiper的切换而不停的变化，而不是在某个时间点突变。 watchSlidesVisibility : true,//如果开启了watchSlidesVisibility，则会在每个可见slide增加一个classname，默认为'swiper-slide-visible' slidesPerView : 3,//将tabs块儿平均分成几份 /*点击了上面的滑块时，下面的内容区也跟着变化 若去掉后，拖动下面上面可继续移动*/ onTap: function(){ mySwiper3.slideTo( mySwiper2.clickedIndex) } }) var mySwiper3 = new Swiper('#swiper-con',{ onSlideChangeStart: function(){ updateNavPosition() } }) function updateNavPosition(){ //默认哪一块是被选中的状态 $('#swiper-tab .active-nav').removeClass('active-nav') var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav'); if (!activeNav.hasClass('swiper-slide-visible')) { console.log(1); if (activeNav.index()>mySwiper2.activeIndex) { console.log(2); var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1 mySwiper2.slideTo(activeNav.index()-thumbsPerNav) } else { console.log(3); mySwiper2.slideTo(activeNav.index()) } } } </script> <!--content--> </body> </html>
效果图：
