Активная вкладка при смене слайда

Здравствуйте. Есть swiper slider, нужно что бы при смене слайда открывалась та или иная вкладка, например: есть слайдер с 3-ма сдайдами и есть табы из трех вкладок. При перелистывании слайдов - в зависимости какой слайд открыт по номеру - делать активной (открытой) соответствующую вкладку. Как такое можно реализовать? Буду очень блдагодарен за любую помощь..
Вот пример кода:

Код:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab-1" data-toggle="tab">tab1</a></li>
  <li><a href="#tab-2" data-toggle="tab">tab2</a></li>
  <li><a href="#tab-3" data-toggle="tab">tab3</a></li>
</ul>

<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 10,
slidesPerView: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
</script>

 

событие смены слайда slideChange
получение индекса активного слайда mySwiper.activeIndex
и открываем вкладку
куча примеров https://swiperjs.com/demos/

 

Спасибо, я перед тем как написал - пересмотрел все демо примеры, и там не нашел подобное, только как галерею сделать, но это не совсем то. Мои знания ограничены html и css

 

Вот нашел что то подобное на просторах интернета

Код:

$(document).ready(function () {
    var mySwiper = new Swiper('.swiper-container', {
        loop: false,
        mousewheel: {
            invert: false,
        },
    });
    mySwiper.on('slideChange', function (realIndex) {
        var activeSlide = $slider.find('.swiper-slide.swiper-slide-active');

        if (activeSlide.hasClass('dark')) {
            $('#nav').addClass('darknav');
        } else {
            $('#nav').removeClass('darknav');
        }

    });
});

Но я понимаю, что кусок кода этот - нужно переделать

Код:

        if (activeSlide.hasClass('dark')) {
            $('#nav').addClass('darknav');
        } else {
            $('#nav').removeClass('darknav');
        }

Что то не пойму пока логику..(

 

Вот это показывает в логах, что первый слайд начинается с 0

Код:

    mySwiper.on('slideChange', function () {
    console.log('mySwiper.realIndex', mySwiper.realIndex);
});

Как сделать так, что бы например - 0 соответствовал первой вкладке и присваивал ей активный клас, 1- второй и т.д. по возростанию? Это походу и вкладкам нужны индексы?

 

HTML:

<div class="conteiner">
    <div class="row">
        <!-- Swiper -->
        <div class="col-md-12">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="col-md-12">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" id="myTab">
                    <li><a href="#tab_1" data-toggle="tab">Tab-1</a></li>
                    <li><a href="#tab_2" data-toggle="tab">Tab-2</a></li>
                    <li><a href="#tab_3" data-toggle="tab">Tab-3</a></li>
                    <li><a href="#tab_4" data-toggle="tab">Tab-4</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">Tab-1</div>
                    <div class="tab-pane" id="tab_2">Tab-2</div>
                    <div class="tab-pane" id="tab_3">Tab-3</div>
                    <div class="tab-pane" id="tab_4">Tab-4</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Swiper JS -->


<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
        },
    });

    swiper.on('slideChange', function () {
        let i = this.realIndex +1;
        $('#myTab a[href="#tab_' + i + '"]').tab('show');
    });
</script>

 

Спасибо Большое fanatic, это то, что нужно

 

У меня ище один ворос по этой карусели.. Поставил в настройках

Код:

slidesPerView: 4.5, 

Отображаються 4 с половиной блока. При перелистывании на последнюю страницу - половинка блока уже показывается слева, а последний блок выровнян по правому краю. Нужно что бы на последней странице так же как и на предыдущих - первый блок был ровно по левому краю (целый), а в конце осталась пустота на половину блока..

 

оооо, как мед так и ложку

 

ну slidesOffsetAfter отказываеться работать почему то при slidesPerColumn: 2
slidesOffsetBefore работает, а slidesOffsetAfter нет

 

есть же документация слайдера
я до этого, не работал с этим слайдером
пробежался по документации, нашел решение.
что же вы такие ленивые?

 

Я перечитал инструкцию, стандартными средствами никак, только при slidesPerColumn: 1 можно применить slidesOffsetAfter.
А как правильно на query написать условие? Т.е,. если пролистано в конец - то добавить класс текущему или родительскому блоку? Вот этот код например, только не понимаю синтаксис как написать условие проверки на наличие последней активной страницы

Код:

 
swiper.on('slideChange', function () {
    if (activeSlide.hasClass('')) {
        $('#').addClass('');
    }  
 });