Bootstrap tabs внутри slick slider

У меня есть такой макет

Т.е. это табы внутри слайдера. Контент табов в слайдер не входит - только сами вкладки. Делаю с помощью slick slider. Разметка следующая:

$('.nav-tabs').slick({ 
  infinite: true, 
  slidesToShow: 4, 
  slidesToScroll: 1, 
  prevArrow: '<img class="slick-prev" src="img/left.png">', 
  nextArrow: '<img class="slick-next" src="img/right.png">' 
});

<!-- Nav tabs --> 
<ul class="nav nav-tabs"> 
  <li class="active"><a href="#home" data-toggle="tab">Главная</a></li> 
  <li><a href="#profile" data-toggle="tab">Профиль</a></li> 
  <li><a href="#messages" data-toggle="tab">Сообщения</a></li> 
  <li><a href="#settings" data-toggle="tab">Настройки</a></li> 
</ul> 
 
<!-- Tab panes --> 
<div class="tab-content"> 
  <div class="tab-pane active" id="home">1...</div> 
  <div class="tab-pane" id="profile">2...</div> 
  <div class="tab-pane" id="messages">3...</div> 
  <div class="tab-pane" id="settings">...</div> 
</div>

На выходе получается такая

<ul class="nav nav-tabs slick-initialized slick-slider"><img class="slick-prev slick-arrow" src="img/left.png" style="display: block;">
    <div aria-live="polite" class="slick-list draggable">
        <div class="slick-track" role="listbox" style="opacity: 1; width: 4170px; transform: translate3d(-1112px, 0px, 0px);">
            <li class="slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="active slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide20" style="width: 278px;"><a href="#home" data-toggle="tab" tabindex="0">Главная</a>
            </li>
            <li class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide21" style="width: 278px;"><a href="#profile" data-toggle="tab" tabindex="0">Профиль</a>
            </li>
            <li class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide22" style="width: 278px;"><a href="#messages" data-toggle="tab" tabindex="0">Сообщения</a>
            </li>
            <li class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide23" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="0">Настройки</a>
            </li>
            <li class="slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide24" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide25" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="slick-slide" data-slick-index="6" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide26" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
            <li class="active slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#home" data-toggle="tab" tabindex="-1">Главная</a>
            </li>
            <li class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#profile" data-toggle="tab" tabindex="-1">Профиль</a>
            </li>
            <li class="slick-slide slick-cloned" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#messages" data-toggle="tab" tabindex="-1">Сообщения</a>
            </li>
            <li class="slick-slide slick-cloned" data-slick-index="10" aria-hidden="true" tabindex="-1" style="width: 278px;"><a href="#settings" data-toggle="tab" tabindex="-1">Настройки</a>
            </li>
        </div>
    </div>


    <img class="slick-next slick-arrow" src="img/right.png" style="display: block;">
</ul>

И всё даже работает но только 1 раз. Т.е. кликаем по вкладке - она открывает нужный блок контента - кликаем по другой - другая тоже работает, но с первой не убирается при этом класс .active и при повторном клике на неё не происходит ничего. Подозреваю, что проблема с селекторами, которые заданы для табов в самом бутстрапе.

Как можно это решить не переписывая код фреймворка?