'Slick JS as Swipe Tabs

I've found this code snippet : https://codepen.io/hani_ouni/pen/LZxKxG in it works perfectly on codepen.io 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 .

here is the code

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 :

$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;
}

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);
    });
});

any help please ?

Solution 1:^[1]

This code pen using SASS and external JavaScript as well. Please try this one below. Next time when you visit code with a label name CSS (SCSS), you have to click to the arrow on the right corner and choose: View Compiled CSS

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

.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>

Solution 2:^[2]

its not good work on touch screen mobile

its only for desktop / laptop monitor

update code for mobile screen

when i click on swipe-tab2

its show Tab 1 Tab 2 Tab 3 its ok

but when i click on Tab3 its show

tab3 tab4 tab5 its wrong code

when i click tab3 its show tab2+tab3+tab4

update your code.....

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	trungk18
Solution 2	Kavita Mantri

'Slick JS as Swipe Tabs

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]