Использую slick слайдер + Bootstrap 4
Есть такая разметка:
if ($('.nav-pills').length) {
$('.nav-pills').each(function() {
var $this = $(this);
$this.not('.slick-initialized').slick({
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
arrows: false,
infinite: false,
touchMove: true,
draggable: true,
variableWidth: true,
focusOnSelect: false,
responsive: [{
breakpoint: 992,
settings: {
focusOnSelect: true,
}
}, ]
});
$this.on('afterChange', function(event, slick, currentSlide, nextSlide) {
//console.log(nextSlide);
});
});
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-1-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="false">Contact</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-4-tab" data-toggle="pill" href="#pills-4" role="tab" aria-controls="pills-4" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-5-tab" data-toggle="pill" href="#pills-5" role="tab" aria-controls="pills-5" aria-selected="false">Contact</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-7-tab" data-toggle="pill" href="#pills-7" role="tab" aria-controls="pills-7" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-15-tab" data-toggle="pill" href="#pills-15" role="tab" aria-controls="pills-15" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">1...</div>
<div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2-tab">2...</div>
<div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3-tab">3...</div>
<div class="tab-pane fade" id="pills-4" role="tabpanel" aria-labelledby="pills-4-tab">4...</div>
<div class="tab-pane fade" id="pills-5" role="tabpanel" aria-labelledby="pills-5-tab">5...</div>
<div class="tab-pane fade" id="pills-7" role="tabpanel" aria-labelledby="pills-7-tab">7...</div>
<div class="tab-pane fade" id="pills-15" role="tabpanel" aria-labelledby="pills-15-tab">15...</div>
</div>
Управление переключением табов должно работать как слайдер если не вмещается в ширину экрана.
Т.е. при клике на nav-link
добавляется активный класс active (слайд внутри которого ссылка - становится активным), а у всех остальных убирается активный класс (как и у слайдов). Т.е. один активный слайд, ссылка внутри него и соответствующий таб.
Сейчас активный класс у всех ссылок (по которым происходит клик) остается активным (все подсвечиваются синим).
Вопрос: Как переключать активный класс на bootstrap табах внутри slick слайдера?