like in topic, i have tiny slider who is tweaking at first change of image like 2 times and then go smooth and all is good, but first load gives tweak of try 2 change image. Maybe u can figure it out? Really thanks for time, and i am fresh in webdev so dont be rude at me :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>Make the anchors hidden, and call your interval function at the beginning.
$(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>