Не работают кнопки слайдера

$(function() { 
  // Все вкладки c классом `.slider__btn`. 
  var $tabs = $('.slider__btn'); 
 
  // Вешаем функцию обработчик на событие `click`. 
  $tabs.on('click', function(event) { 
    changeTab($(this).index('.slider__btn')); 
  }); 
 
  $('.slider__prev').on('click', function(event) { 
    let index = $tabs.filter('.-active').index('.slider__btn'); 
 
    changeTab(--index); 
  }); 
 
  $('.slider__next').on('click', function(event) { 
    let index = $tabs.filter('.-active').index('.slider__btn'); 
 
    changeTab(++index); 
  }); 
 
  // Индекс вкладки на которую будем переключаться. 
  // Отсчет индексов в `javascript` ведется от нуля. 
  // Если индекс равен 0, значит это первая вкладка. 
  // Если индекс равен 1, значит это вторая вкладка. 
  // Переключим вкладку на вторую ч/з три секунды. 
  var timerId = setTimeout(changeTab, 3000, 1); 
 
  // Функция смены текущей вкладки. 
  function changeTab(index) { 
    // $tabs.length - количество вкладок. 
    // a % b – это остаток от деления a на b. 
    index = index % $tabs.length; 
 
    // Меняем класс у текущей вкладки. 
    $tabs.removeClass('-active').eq(index).addClass('-active'); 
 
    // Очищаем предыдущий таймер, чтобы 
    // не было зацикливаний при постоянных кликах. 
    clearTimeout(timerId); 
 
    // Переключим вкладку на следующую ч/з три секунды. 
    // ++ - увеличиваем активную вкладку на единицу. 
    timerId = setTimeout(changeTab, 3000, ++index); 
  } 
});

.shop__slider { 
  position: relative; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 400px; 
  height: 66px; 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; 
} 
 
.shop__slider .slider__prev { 
  margin-right: 100px; 
  width: 41px; 
  height: 41px; 
  background: #95a5a6; 
  border-radius: 5px; 
  position: relative; 
  flex-shrink: 0; 
} 
 
.shop__slider .slider__prev::before { 
  font-size: 30px; 
  content: ""; 
  position: absolute; 
  top: 3px; 
  right: 14px; 
  font-family: FontAwesome, serif; 
  text-align: center; 
  color: #fff; 
} 
 
.shop__slider .slider__prev:hover { 
  cursor: pointer; 
  background-color: #34495e; 
} 
 
.shop__slider .slider__prev:hover::before { 
  color: #fff; 
} 
 
.shop__slider .slider__btn { 
  width: 100px; 
  height: 66px; 
  border: 2px solid #ecf0f1; 
  background-color: #ecf0f1; 
  border-radius: 5px; 
  transition: background-color 200ms, color 200ms; 
  text-align: center; 
} 
 
.shop__slider .slider__btn:hover { 
  cursor: pointer; 
  background: #34495e; 
} 
 
.shop__slider .slider__btn:hover .slider__link { 
  color: #fff; 
} 
 
.shop__slider .slider__btn .slider__link { 
  margin: 0 auto; 
  text-decoration: none; 
  color: #34495e; 
  font-size: 10px; 
  font-weight: 700; 
  line-height: 66px; 
  text-transform: uppercase; 
} 
 
.shop__slider .-active { 
  position: relative; 
  background: #34495e; 
} 
 
.shop__slider .-active .slider__link { 
  color: #fff; 
} 
 
.shop__slider .-active::after { 
  cursor: default; 
  content: ""; 
  position: absolute; 
  bottom: -15px; 
  right: 15px; 
  border: 8px solid transparent; 
  border-top: 7px solid #34495e; 
} 
 
.shop__slider .slider__next { 
  margin-left: 100px; 
  width: 41px; 
  height: 41px; 
  background: #95a5a6; 
  border-radius: 5px; 
  position: relative; 
  transition: background-color 200ms; 
  flex-shrink: 0; 
} 
 
.shop__slider .slider__next::before { 
  font-size: 30px; 
  content: ""; 
  position: absolute; 
  top: 3px; 
  left: 14px; 
  font-family: FontAwesome, serif; 
  text-align: center; 
  color: #fff; 
} 
 
.shop__slider .slider__next:hover { 
  cursor: pointer; 
  background-color: #34495e; 
} 
 
.shop__slider .slider__next:hover::before { 
  color: #fff; 
}

<div class="shop__slider"> 
  <div class="slider__prev"></div> 
  <div class="slider__btn -active"> 
    <a href="#" class="slider__link">Хиты продаж</a> 
  </div> 
  <div class="slider__btn"> 
    <a href="#" class="slider__link">Акции</a> 
  </div> 
  <div class="slider__btn"> 
    <a href="#" class="slider__link">Новинки</a> 
  </div> 
  <div class="slider__next"></div> 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">