Slick JSをスワイプタブとして

Question

このコードスニペットはhttps://codepen.io/hani_ouni/pen/LZxKxGで完全に動作しますが、codepen.ioで完全に動作しますが、ダウンロードしてマシン上で実行しようとすると動作しないため、ブラウザの次のエラーが表示されますコンソール 。 jqueryの

$(function() { 
    'use strict'; 

    var $swipeTabsContainer = $('.swipe-tabs'), 
     $swipeTabs = $('.swipe-tab'), 
     $swipeTabsContentContainer = $('.swipe-tabs-container'), 
     currentIndex = 0, 
     activeTabClassName = 'active-tab'; 

    $swipeTabsContainer.on('init', function(event, slick) { 
     $swipeTabsContentContainer.removeClass('invisible'); 
     $swipeTabsContainer.removeClass('invisible'); 

     currentIndex = slick.getCurrent(); 
     $swipeTabs.removeClass(activeTabClassName); 
     $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
    }); 

    $swipeTabsContainer.slick({ 
     //slidesToShow: 3.25, 
     slidesToShow: 3, 
     slidesToScroll: 1, 
     arrows: false, 
     infinite: false, 
     swipeToSlide: true, 
     touchThreshold: 10 
    }); 

    $swipeTabsContentContainer.slick({ 
     asNavFor: $swipeTabsContainer, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     arrows: false, 
     infinite: false, 
     swipeToSlide: true, 
    draggable: false, 
     touchThreshold: 10 
    }); 


    $swipeTabs.on('click', function(event) { 
     // gets index of clicked tab 
     currentIndex = $(this).data('slick-index'); 
     $swipeTabs.removeClass(activeTabClassName); 
     $('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName); 
     $swipeTabsContainer.slick('slickGoTo', currentIndex); 
     $swipeTabsContentContainer.slick('slickGoTo', currentIndex); 
    }); 

    //initializes slick navigation tabs swipe handler 
    $swipeTabsContentContainer.on('swipe', function(event, slick, direction) { 
     currentIndex = $(this).slick('slickCurrentSlide'); 
     $swipeTabs.removeClass(activeTabClassName); 
     $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
    }); 
}); 

任意のヘルプ

$swipe-tab-color: #757575; 
$swipe-active-tab-color: #000; 


.slick-initialized { 
    .swipe-tab-content { 
    position: relative; 
    min-height: 365px; 

    @media screen and (min-width: 767px) { 
     min-height: 500px; 
    } 
    } 

    .swipe-tab { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 50px; 
    background: none; 
    border: 0; 
    color: $swipe-tab-color; 
    cursor: pointer; 
    text-align: center; 
    border-bottom: 2px solid rgba($swipe-active-tab-color, 0); 
    transition: all 0.5s; 

    &:hover { 
     color: $swipe-active-tab-color; 
    } 

    &.active-tab { 
     border-bottom-color: $swipe-active-tab-color; 
     color: $swipe-active-tab-color; 
     font-weight: bold; 
    } 

    } 
} 


.main-container { 
    padding: 25px; 
    background: #f1f1f1; 
} 

してください：ここ

はコード

html : 
<div class="sub-header "> 

<div class="swipe-tabs"> 
    <div class="swipe-tab">One</div> 
    <div class="swipe-tab">Two</div> 
    <div class="swipe-tab">Three</div> 
    <div class="swipe-tab">Four</div> 
    <div class="swipe-tab">Five</div> 
    </div> 
</div> 
<div class="main-container"> 
    <div class="swipe-tabs-container "> 
    <div class="swipe-tab-content">Tab 1</div> 
    <div class="swipe-tab-content">Tab 2</div> 
    <div class="swipe-tab-content">Tab 3</div> 
    <div class="swipe-tab-content">Tab 4</div> 
    <div class="swipe-tab-content">Tab 5</div> 
    </div> 
</div> 

CSSのですか？

Answer 1

このコードペンは、SASSと外部JavaScriptを使用しています。以下で試してみてください。あなたがラベル名のCSS（SCSS）を使用してコードを訪れたとき、あなたは右の角にある矢印をクリックして選択する必要がある次の時間：ビューコンパイルCSS

$(function() { 
 
\t 'use strict'; 
 

 
\t var $swipeTabsContainer = $('.swipe-tabs'), 
 
\t \t $swipeTabs = $('.swipe-tab'), 
 
\t \t $swipeTabsContentContainer = $('.swipe-tabs-container'), 
 
\t \t currentIndex = 0, 
 
\t \t activeTabClassName = 'active-tab'; 
 

 
\t $swipeTabsContainer.on('init', function(event, slick) { 
 
\t \t $swipeTabsContentContainer.removeClass('invisible'); 
 
\t \t $swipeTabsContainer.removeClass('invisible'); 
 

 
\t \t currentIndex = slick.getCurrent(); 
 
\t \t $swipeTabs.removeClass(activeTabClassName); 
 
     \t $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
 
\t }); 
 

 
\t $swipeTabsContainer.slick({ 
 
\t \t //slidesToShow: 3.25, 
 
\t \t slidesToShow: 3, 
 
\t \t slidesToScroll: 1, 
 
\t \t arrows: false, 
 
\t \t infinite: false, 
 
\t \t swipeToSlide: true, 
 
\t \t touchThreshold: 10 
 
\t }); 
 

 
\t $swipeTabsContentContainer.slick({ 
 
\t \t asNavFor: $swipeTabsContainer, 
 
\t \t slidesToShow: 1, 
 
\t \t slidesToScroll: 1, 
 
\t \t arrows: false, 
 
\t \t infinite: false, 
 
\t \t swipeToSlide: true, 
 
    draggable: false, 
 
\t \t touchThreshold: 10 
 
\t }); 
 

 

 
\t $swipeTabs.on('click', function(event) { 
 
     // gets index of clicked tab 
 
     currentIndex = $(this).data('slick-index'); 
 
     $swipeTabs.removeClass(activeTabClassName); 
 
     $('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName); 
 
     $swipeTabsContainer.slick('slickGoTo', currentIndex); 
 
     $swipeTabsContentContainer.slick('slickGoTo', currentIndex); 
 
    }); 
 

 
    //initializes slick navigation tabs swipe handler 
 
    $swipeTabsContentContainer.on('swipe', function(event, slick, direction) { 
 
    \t currentIndex = $(this).slick('slickCurrentSlide'); 
 
\t \t $swipeTabs.removeClass(activeTabClassName); 
 
\t \t $('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName); 
 
\t }); 
 
});

.slick-initialized .swipe-tab-content { 
 
    position: relative; 
 
    min-height: 365px; 
 
} 
 
@media screen and (min-width: 767px) { 
 
    .slick-initialized .swipe-tab-content { 
 
    min-height: 500px; 
 
    } 
 
} 
 
.slick-initialized .swipe-tab { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    height: 50px; 
 
    background: none; 
 
    border: 0; 
 
    color: #757575; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    border-bottom: 2px solid transparent; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.slick-initialized .swipe-tab:hover { 
 
    color: #000; 
 
} 
 
.slick-initialized .swipe-tab.active-tab { 
 
    border-bottom-color: #000; 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 

 
.main-container { 
 
    padding: 25px; 
 
    background: #f1f1f1; 
 
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 

 
<div class="sub-header "> 
 
    <div class="swipe-tabs"> 
 
    <div class="swipe-tab">One</div> 
 
    <div class="swipe-tab">Two</div> 
 
    <div class="swipe-tab">Three</div> 
 
    <div class="swipe-tab">Four</div> 
 
    <div class="swipe-tab">Five</div> 
 
    </div> 
 
</div> 
 
<div class="main-container"> 
 
    <div class="swipe-tabs-container "> 
 
    <div class="swipe-tab-content">Tab 1</div> 
 
    <div class="swipe-tab-content">Tab 2</div> 
 
    <div class="swipe-tab-content">Tab 3</div> 
 
    <div class="swipe-tab-content">Tab 4</div> 
 
    <div class="swipe-tab-content">Tab 5</div> 
 
    </div> 
 
</div>

Answer 2

そのよくありません携帯電話の画面のためのタッチスクリーン携帯

その唯一のデスクトップ/ノートパソコンのモニターのための

更新コードに関する作業

私はスワイプ-TAB2をクリック

そのショー タブ1つの タブ2 タブ3 そのOK

しかし、私はTAB3そのショー

TAB3 TAB4 tab5をクリックすると その間違ったコード

私がタブ3をクリックすると、その表示タブ2 +タブ3 +タブ4

コードを更新.....