Edit in JSFiddle

$(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: 8,
		slidesToScroll: 1,
		arrows: true,
		prevArrow: $('#aro1_prev'),
		nextArrow: $('#aro1_next'),
		infinite: false,
		swipeToSlide: true,
		touchThreshold: 10,
		responsive: [
		{
		  breakpoint: 934,
		  settings: {
			slidesToShow: 3,
		  }
		}
		]
	});

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

<div class="sub-header ">
	<div class="arrowSlider">
		<span class="prev" id="aro1_prev">◀</span>
		<span class="next" id="aro1_next">▶</span>
	</div>
  <div class="swipe-tabs">
    <div class="swipe-tab">1</div>
    <div class="swipe-tab">2</div>
    <div class="swipe-tab">3</div>
    <div class="swipe-tab">4</div>
    <div class="swipe-tab">5</div>
    <div class="swipe-tab">5</div>
    <div class="swipe-tab">6</div>
    <div class="swipe-tab">7</div>
    <div class="swipe-tab">8</div>
    <div class="swipe-tab">9</div>
    <div class="swipe-tab">10</div>
    <div class="swipe-tab">11</div>
    <div class="swipe-tab">12</div>
    <div class="swipe-tab">13</div>
    <div class="swipe-tab">14</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 class="swipe-tab-content">Tab 6</div>
    <div class="swipe-tab-content">Tab 7</div>
    <div class="swipe-tab-content">Tab 8</div>
    <div class="swipe-tab-content">Tab 9</div>
    <div class="swipe-tab-content">Tab 10</div>
    <div class="swipe-tab-content">Tab 11</div>
    <div class="swipe-tab-content">Tab 12</div>
    <div class="swipe-tab-content">Tab 13</div>
    <div class="swipe-tab-content">Tab 14</div>
  </div>
</div>

.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: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: none;
  border: 0;
  color: #757575;
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  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;
}

.arrowSlider {position:relative;}
#aro1_prev {position:absolute;left:0px;cursor:pointer;}
#aro1_next {position:absolute;right:0px;cursor:pointer;}
.slick-slider {margin:0 30px;}