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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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