Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

669
Vistas
Detener e iniciar la reproducción automática en el contenedor Swiper según el evento de reproducción y pausa de video

Estoy tratando de poner una combinación de elementos de video e imagen dentro del contenedor swiper con el atributo de reproducción automática. Pero traté de detener la función de reproducción automática en Swiper cuando el video se está reproduciendo e iniciar la reproducción automática cuando el video está en pausa o finaliza. Además, al pasar a la siguiente diapositiva, el video debe reproducirse automáticamente desde el principio. Pero actualmente, al implementar la condición, puedo detener la reproducción automática solo por primera vez y la reproducción automática no se puede controlar desde el segundo ciclo. Necesito ayuda para resolver la lógica. Probé un ejemplo en el siguiente enlace 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); });
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

es esto lo que buscabas:

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

Tuve que reconstruirlo desde cero, por lo que puede ser un poco diferente al tuyo, lo siento, usé el complemento de https://swiperjs.com/ que creo que era el mismo que el tuyo, espero que esto ayude

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda