Tengo una presentación de diapositivas bastante simple escrita en jQuery que se desvanece entre los elementos <div> .
En el código a continuación, está configurado para desvanecerse entre diapositivas cada 5 segundos . ¿Hay alguna manera de modificar esto para poder establecer períodos de tiempo personalizados para mostrar cada diapositiva en su lugar?
Aquí hay un ejemplo de trabajo en jsfiddle.
$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) setTimeout(function() {$('#slideshow > div:first').appendTo("#slideshow")}, 1000) }, 5000);Puedes usar una matriz delay[] para guardar todos los tiempos y crear una función slide() con un método setTimeout() para deslizarte por las diferentes imágenes.
$("#slideshow > div:gt(0)").hide(); let delay = [1000, 3000, 7000], i = 0; function slide() { setTimeout(() => { effect(); if(i === delay.length){ i = 0; console.log('Next delay: ' + delay[i] + ' ms'); } else{ console.log('Next delay: ' + delay[i] + ' ms'); } slide(); }, delay[i]) i++; } slide(); function effect(){ $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000); setTimeout(() => {$('#slideshow > div:first').appendTo("#slideshow")}, 1000) } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #slideshow { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } #slideshow > div { position: absolute; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="slideshow"> <div> <img src="https://www.port.ac.uk/-/media/images/news-events-and-blogs/news/2020/october/cat-eyes-closed-600x400.jpg"> </div> <div> <img src="https://cdn.shopify.com/s/files/1/0997/4496/files/Untitled_design_19_grande.jpg"> </div> <div> <img src="https://media.nature.com/lw800/magazine-assets/d41586-020-02779-3/d41586-020-02779-3_18481780.jpg"> </div> </div>