I am trying to put a combination of video and image elements inside the swiper container with auto-play attribute. But I tried to stop the autoplay function in swiper when the video is playing and start the autoplay when the video is paused or ended. As well on moving to next slide the video should be autoplayed from the starting. But currently on implementing the condition I am able to stop the autoplay only for the first time and the autoplay is not controllable from the second cycle. Need help to solve the logic. I have tried an example in the below link https://codepen.io/thajudeencse/pen/QWQRQEM
$(function () {
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay: 3000
});
var v = document.getElementsByClassName("video")[0];
v.addEventListener ("play", function () {
mySwiper.autoplay.stop();
}, true);
v.addEventListener("ended", function () {
mySwiper.startAutoplay();
}, true);
});
is this what you were after:
https://codepen.io/ptahume/pen/NWyQydx
$(document).ready(function () {
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
//$(".video").each(function () {
//re add to stop all videos auto playing at start
// $(".video").trigger("pause");
// });
var firstload = true;
$(".video").on("play", function () {
if (firstload) {
swiper.autoplay.start();
firstload = false;
return;
}
swiper.autoplay.stop();
});
$(".video").on("ended", function () {
swiper.autoplay.start();
});
});
I had to rebuild the thing from scratch so may be a bit different from yours sorry, I used the plug-in from https://swiperjs.com/ which I think was the same as yours, I hope this helps