Al igual que en el tema, tengo un pequeño control deslizante que está ajustando el primer cambio de imagen como 2 veces y luego funciona sin problemas y todo está bien, pero la primera carga da un ajuste de intentar 2 cambios de imagen. ¿Tal vez puedas resolverlo? Realmente gracias por el tiempo, y soy nuevo en webdev, así que no seas grosero conmigo: P
$(function() { const wrapper = $('#slider'); setInterval(function() { const firstChild = $(wrapper).children()[0]; $(firstChild) .fadeOut(1000) .next('a') .fadeIn(1000) .end() .appendTo('#slider'); }, 3000); }); img { max-width: 100%; } #slider:after { content: ""; display: table; clear: both; } #slider img { float: left; margin: 0 -100% 0 0; } #slider { width: 200px; background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <figure id="slider"> <a target="_blank" href="http://www.google.pl"> <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg" /> </a> <a target="_blank" href="http://www.google.pl"> <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=" /> </a> <a target="_blank" href="http://www.google.pl"> <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg" /> </a> </figure>Oculte los anclajes y llame a su función de intervalo al principio.
$(function() { const wrapper = $('#slider'); const transition = function() { const firstChild = $(wrapper).children()[0]; $(firstChild) .fadeOut(1000) .next('a') .fadeIn(1000) .end() .appendTo('#slider'); }; transition(); // call at beginning setInterval(transition, 3000); }); img { max-width: 100%; } #slider:after { content: ""; display: table; clear: both; } #slider img { float: left; margin: 0 -100% 0 0; } #slider { width: 200px; background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <figure id="slider"> <a hidden target="_blank" href="http://www.google.pl"> <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg" /> </a> <a hidden target="_blank" href="http://www.google.pl"> <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=" /> </a> <a hidden target="_blank" href="http://www.google.pl"> <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg" /> </a> </figure>