0

На десктопе всё ок, а на моб нет. Стоит показ по одному слайду, все остальные, где есть видео не отображают предпросмотр с фото и кнопкой. Я понимаю почему - для экономии трафика и нагрузки. Но как мне их отобразить при активации любого слайда, кроме первого? Выходит, у меня первый слайд работает, как надо, а все остальные - пустота, хотя с вёрсткой всё ок. Пытался вручную на странице удалить html iframe и вставить ещё раз - видео все равно не грузится.

const video = new Swiper('.video-slider ', {
    slidesPerView: 1, 

      navigation: {
       nextEl: '.video-button-next',
       prevEl: '.video-button-prev',
    },


    breakpoints: {  
    992: {
       pagination: {
           el: '.video-pagination',
           type: 'bullets',
           clickable: true
        },
    },
}

1 ответ 1

1

Вы можете использовать обработчик событий onSlideChange для Swiper, чтобы проверять, какой слайд активен, и загружать видео и отображать предпросмотр и кнопку только для этого слайда.

Например:

const video = new Swiper('.video-slider ', {
    slidesPerView: 1,

      navigation: {
       nextEl: '.video-button-next',
       prevEl: '.video-button-prev',
    },

    breakpoints: {
    992: {
       pagination: {
           el: '.video-pagination',
           type: 'bullets',
           clickable: true
        },
    },
},

    on: {
        slideChange: function () {
            const activeSlide = this.activeIndex;
            const videoIframe = document.querySelector(`.swiper-slide[data-swiper-slide-index="${activeSlide}"] video`);
            videoIframe.src = videoIframe.dataset.src;
            const preview = document.querySelector(`.swiper-slide[data-swiper-slide-index="${activeSlide}"] .video-preview`);
            const button = document.querySelector(`.swiper-slide[data-swiper-slide-index="${activeSlide}"] .video-button`);
            preview.style.display = "block";
            button.style.display = "block";
        }
    }
});

Вы также можете добавить обработчики событий для других событий Swiper, таких как init, чтобы загрузить первый слайд на странице, и lazyImageReady, чтобы загрузить остальные видео, когда они становятся видимыми.

Надеюсь, это поможет)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.