tab特效

@@ -111,26 +111,40 @@ class GuangNew extends Page {
     // 频道swiper
     swiperTab() {
         if ($('.swiper-tab').length > 0) {
-            new Swiper('.swiper-tab .swiper-container', {
-                effect: 'coverflow',
-                loop: true,
-                grabCursor: true,
-                slidesPerView: 'auto',
-                followFinger: false,
-                centeredSlides: true,
-                speed: 200,
-                coverflow: {
-                    rotate: 0,
-                    stretch: 0,
-                    depth: 0,
-                    modifier: 1,
-                    slideShadows: false
-                },
-                touchRatio: 0.01,
-                onInit: function(swiper) {
-                    swiper.update({
-                        updateTranslate: true
-                    });
+            let startX = 0;
+            let moveEndX = 0;
+            let X = 0;
+            let $active = '';
+            let $swiperTab = $('.swiper-tab');
+            let $first = '';
+            let $last = '';
+            let perWidth = $(window).width() / 750 * 104;
+
+            $swiperTab.find('.swiper-slide:eq(2)').addClass('swiper-slide-active');
+            $swiperTab.on('touchstart', (e) => {
+                startX = e.originalEvent.changedTouches[0].pageX;
+            });
+            $swiperTab.on('touchend', (e) => {
+                moveEndX = e.originalEvent.changedTouches[0].pageX;
+                X = moveEndX - startX;
+                $active = $swiperTab.find('.swiper-slide-active');
+                $first = $swiperTab.find('.swiper-slide:first').clone();
+                $last = $swiperTab.find('.swiper-slide:last').clone();
+                if (X < 0) { // 向左滑动
+                    $swiperTab.css('margin-left', `-${perWidth}px`);
+                    $active.next('div').addClass('swiper-slide-active').siblings('div')
+                        .removeClass('swiper-slide-active');
+                    $swiperTab.find('.swiper-wrapper').append($first);
+                    $swiperTab.find('.swiper-slide:first').remove();
+                    $swiperTab.css('margin-left', 0);
+                }
+                if (X > 0) { // 向右滑动
+                    $swiperTab.css('margin-right', `-${perWidth}px`);
+                    $active.prev('div').addClass('swiper-slide-active').siblings('div')
+                        .removeClass('swiper-slide-active');
+                    $swiperTab.find('.swiper-wrapper').prepend($last);
+                    $swiperTab.find('.swiper-slide:last').remove();
+                    $swiperTab.css('margin-right', 0);
                 }
             });
         }

@@ -132,6 +132,7 @@
             width: 104px;
             height: 320px;
             padding: 0 2px;
+            transition: all 0.3s;
 
             .tab-item {
                 width: 100%;