Как инициализировать Swiper в табах?

Question

[Александра]

Есть табы и внутри каждого swiper с одинаковыми классами, как при переключении табов заставить работать слайдер?

Работает слайдер только в первом табе:

<ul class="tabs">
            <li><a class="is-active" href="#tab-1">Таб - 1</a></li>
            <li><a href="#tab-2">Таб - 2</a></li>
            <li><a href="#tab-3">Таб - 3</a></li>
  </ul>
<div class="tab-block" id="tab-1">
//slider
</div>
<div class="tab-block" id="tab-2">
//slider2
</div>

var layoutSlider = new Swiper('.layout-slider', {
            spaceBetween: 0,
            effect: 'fade',
            loop: 'true',
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });


    $('.tabs a').click(function(e) {
        e.preventDefault();
        $('.tabs a').removeClass('is-active');
        $(this).addClass('is-active');
        var tab = $(this).attr('href');

        $('.tab-block').not(tab).css({
            'display': 'none'
        });

        $(tab).fadeIn(400);
    });

Answer 1

[Andrey K.]

Попробуйте добавить в параметры слайдера:

observer: true,
observeParents: true

Тогда при открытии вкладки, слайдер будет инициализироваться.

Можете подробнее глянуть в документации: https://swiperjs.com/api/

Comments

[Владислав Архипов]

Спасибо Вам, добрый человек!

[hatemanik]

Актуально и сейчас