I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/CSS because the jQuery code looks clean, yet $('.row1 > div:first') is displaying the previous image. The structure of my HTML and CSS might need some adjustments, but slow motion is better than no motion.
Check out my portfolio here!
$(function() {
$(".row1 > div:gt(0)").hide();
setInterval(function() {
$('.row1 > div:first')
.fadeOut(1500)
.next()
.fadeIn(1500)
.end()
.appendTo('.row1');
}, 4000);
});* {
box-sizing:border-box;
}
[class*="col-"] {
float: left;
display:block;
text-align:center;
...
.col-12 {
margin:0;
padding:0;
width:100%;
height:100%;
padding:2%;
}