AlexaShemetova
@AlexaShemetova
While I'm breathing - I love and believe

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

Есть табы и внутри каждого 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);
    });
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
@JustFreelance
front-end developer
Попробуйте добавить в параметры слайдера:

observer: true,
observeParents: true


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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы