karelina-nat
@karelina-nat

Как контролировать autoplay одного свайпера другим?

У меня есть свайпер с 5 слайдами, в третьем слайде этого свайпера вставлен другой свайпер, который автоматически проигрывается.
Задача, чтобы внутренний свайпер не проигрывался автоматически, когда этот третий слайд вне зоны видимости, а когда третий слайд виден, то начиналось автопроигрывание.

Главный свайпер с определением текущего слайда
$(document).ready(function () {
    if ($(window).width() >= 1000) {
        $('.first__wrapper').show(1500);

        if (!/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {

            $('.second__desc').addClass('is-hide');
            $('.slider-main__desc').addClass('is-hide');
            $('.third__title ').addClass('is-hide');
            $('.five__wrapper').addClass('is-hide');


            if ($('.main-scroll').hasClass('main--index')) {
                $('.main-scroll').addClass('swiper-container');
                $('#pagescroll').addClass('swiper-wrapper');

                var mySwiper = new Swiper('.main-scroll', {
                    slidesPerView: 1,
                    mousewheel: {
                        eventsTarged: '.main',
                        releaseOnEdges: true,
                    },
                    speed: 1000,
                    navigation: {
                        nextEl: '.scroll__btn--next',
                        prevEl: '.scroll__btn--prev',
                    },
                    scrollbar: {
                        el: '.scroll__body',
                        draggable: true,
                        dragSize: 50,
                    },
                });
                mySwiper.on('slideChange', function () {
                    var activeSlideIndex = mySwiper.activeIndex;
                    console.log(activeSlideIndex);
                    if (activeSlideIndex == 2) {
                        console.log('this is third slide');
                    }
                });

            }
        }
    }
});


Свайпер внутри третьего слайда:
$(document).ready(function () {

    function main_swiper() {
        new Swiper('.slider-main', {
            fadeEffect: {
                crossFade: true
            },
            autoplay: {
                delay: 3000,
            },
            speed: 2000,
            loop: true,
            preloadImages: false,
            lazy: true,
            pagination: {
                el: '.slider-main__pagination',
                type: 'bullets',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="slider-main__bullet ' + className + '" data-toggle="' + index + '"></span>';
                },
            },
            navigation: {
                nextEl: '.slider-main__nav--next',
                prevEl: '.slider-main__nav--prev',
            },
        });
    }

    setTimeout(main_swiper, 5000)

});
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
21 окт. 2020, в 12:50
2000 руб./за проект
21 окт. 2020, в 12:32
1500 руб./за проект