Today, I delved into JQuery and JavaScript for the first time. It's possible that I've made a very basic mistake. Essentially, I have a section in the markup, where JavaScript sets the height to match the viewport. Inside this section, there are 4 divs, each containing an image, with the intention of having them fade out sequentially. I wrote some code but it doesn't seem to be working, and after trying to debug it, I'm still unsure why. Can someone please help me figure out what I'm doing wrong? My goal is to create a simple full-screen slideshow from scratch because all I find online are pre-made templates, and I want to understand how to code it myself.
Here is the HTML
<!DOCTYPE html>
<html>
<head lang="pt-br">
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<!--END CSS-->
<!--SCRIPT-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery/my_jquery_funcs.js"></script>
<!--END SCRIPT-->
<title>Patrick Oliveira</title>
</head>
<body>
<!--HERO COMECA AQUI-->
<section id="hero-slider">
<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</section>
<script>
realTimeHeight();/*Atualiza em tempo real a altura do slide show*/
</script>
<!--HERO TERMINA AQUI-->
</body>
</html>
The CSS
#hero-slider{
width: 100%;
}
#slide-1, #slide-2, #slide-3, #slide-4{
width: 100%;
height: inherit;
position: absolute;
}
#slide-1{
background: url("../imgs/imagem1.jpeg") no-repeat center;
background-size: cover;
}
#slide-2{
background: url("../imgs/imagem2.jpg") no-repeat center;
background-size: cover;
}
#slide-3{
background: url("../imgs/imagem3.jpg") no-repeat center;
background-size: cover;
}
#slide-4{
background: url("../imgs/imagem4.jpg") no-repeat center;
background-size: cover;
}
And the JavaScript
var i = 4;
$(document).ready(function(){
$(window).resize(function(){
realTimeHeight();
});
setTimeout(function(){
fadeItOut("#slide-"+i);
}, 2500);
});
function fadeItOut(objectID){
var fadeTime = 2500; /*time to fade out*/
$("#"+objectID).fadeOut(fadeTime);
if(i == 1){
i = 5;
}
i--;
}
function realTimeHeight(){
var altura = $(window).height();
$("#hero-slider").css("height",altura);
}
P.s: I just want to learn how to make one from scratch, after that I'll start using templates for time saving.