1

Использую 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 слайдера?

1 ответ 1

2

Проблема в одновременном использовании слайдера и табов.

Решение в лоб = на событие появления таба 'show.bs.tab' удалять класс active с предыдущего таба.

$('.nav-pills').each(function() {
  var $this = $(this);

  $this.on('show.bs.tab', function(e) {
    $(e.relatedTarget).removeClass('active');
    $this.slick('slickGoTo', $(e.target).closest('.slick-slide').index());
    console.log($(e.target).closest('.slick-slide').index());
  });

  $this.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,
      }
    }, ]
  });
});
<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.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous"></script>


<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <div 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>
  </div>
  <div 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">Profile1</a>
  </div>
  <div 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">Contact2</a>
  </div>
  <div 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">Profile3</a>
  </div>
  <div 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">Contact4</a>
  </div>
  <div 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">Profile5</a>
  </div>
  <div 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">Contact6</a>
  </div>
</div>


<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>
<input id="ddd" type="button" value="goto5" />

1
  • Круто, спасибо!!!!
    – SVE
    11 авг 2020 в 3:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.