Slick JS as Swipe Tabs
<p>I've found this code snippet : <a href="https://codepen.io/hani_ouni/pen/LZxKxG" rel="nofollow">https://codepen.io/hani_ouni/pen/LZxKxG</a> in it works perfectly on <code>codepen.io</code>  but when I downloaded it and  tried to run it on my machine it doesn't works and prints me the following error on the browser's console . </p>

<p>here is the code </p>

<pre><code>html : 
&lt;div class="sub-header "&gt;

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

<p>css : </p>

<pre><code>$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;

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

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

  }
}


.main-container {
  padding: 25px;
  background: #f1f1f1;
}
</code></pre>

<p>jquery</p>

<pre><code> $(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);
    });
});
</code></pre>

<p>any help please ?</p>