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

Question

[karelina-nat]

У меня есть свайпер с 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)

});

Answer 1

[karelina-nat]

Решение:

var activeSlideIndex;
var mySwiper;
$(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');

                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,
                    },
                });
            }
        }
    }
});

// Свайпер спецпредложений
$(document).ready(function () {
    function main_swiper() {
        new Swiper('.slider-main', {
            fadeEffect: {
                crossFade: true
            },
            autoplay: {
                delay: 3000,
            },
            // autoplayStopOnLast: true,
            speed: 2000,
            loop: true,
            preloadImages: false,
            lazy: true,
            pagination: {
                el: '.slider-main__pagination',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + '</span>';
                },
            },
            navigation: {
                nextEl: '.slider-main__nav--next',
                prevEl: '.slider-main__nav--prev',
            },
        });
        var mySwiper = document.querySelector('.main-scroll').swiper;
        mySwiper.on('slideChange', function () {
            var activeSlideIndex = mySwiper.activeIndex;
            console.log(activeSlideIndex);
            var mainSwiper = document.querySelector('.slider-main').swiper;
            if (activeSlideIndex == 2) {
                console.log('this is third slide');
                mainSwiper.autoplay.start();
            } else {
                mainSwiper.autoplay.stop();
            }
        });
    }
    setTimeout(main_swiper, 4000);
});