Tengo un carrusel Swiper.js que se reproduce automáticamente. También me desvanezco en mi página usando DOMContentLoaded . Esto significa que la primera diapositiva ha cambiado o está en medio de un cambio cuando aparece la página. Por lo tanto, está a la vista una cantidad de tiempo mucho más corta en comparación con los demás.
¿Es posible retrasar la ejecución inicial del carrusel de reproducción automática? Sé que puede agregar un retraso a las diapositivas individuales, pero si lo hago para contrarrestarlo, significa que la segunda vez alrededor de la primera diapositiva se retrasa/está a la vista más tiempo que el resto.
Código JavaScript:
window.addEventListener('DOMContentLoaded', function() { document.body.className = 'visible'; }); var caption = document.querySelector('.swiper-caption span'); new Swiper('.swiper', { // Disable preloading of all images preloadImages: true, // Enable lazy loading lazy: false, effect: 'fade', fadeEffect: { crossFade: true }, loop: true, autoplay: { delay: 1200, disableOnInteraction: false, pauseOnMouseEnter: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', type: 'fraction' }, on: { init: function() { updateCaptionText(this); }, activeIndexChange: function() { updateCaptionText(this); } } }); function updateCaptionText(slider) { caption.textContent = slider.slides[slider.activeIndex].dataset.caption; }Código CSS:
body.hidden { opacity: 0; } body.visible { opacity: 1; transition: opacity .48s .24s ease-out; }Llame swiper.autoplay.stop() justo después de configurarlo y llame a swiper.autoplay.start() dentro del controlador de eventos DOMContentLoaded . Al igual que:
const swiper = new Swiper(".swiper", { // Disable preloading of all images preloadImages: true, // Enable lazy loading lazy: false, effect: "fade", fadeEffect: { crossFade: true, }, loop: true, autoplay: { delay: 1200, disableOnInteraction: false, pauseOnMouseEnter: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", type: "fraction", }, on: { init: function () { updateCaptionText(this); }, activeIndexChange: function () { updateCaptionText(this); }, }, }); swiper.autoplay.stop(); window.addEventListener("DOMContentLoaded", () => { document.body.className = "visible"; swiper.autoplay.start(); }); Si desea retrasar aún más el inicio inicial, para que coincida con la duración de su animación CSS, puede usar un setTimout , como este:
window.addEventListener("DOMContentLoaded", () => { document.body.className = "visible"; setTimeout(() => swiper.autoplay.start(), 1000); // 1000 means 1s, it's in ms here. });Ejemplo en vivo aquí en este CodePen que bifurqué. Las referencias de los métodos usados están aquí en el documento oficial de Swiper.js.