Create Hero Slider

Hero Slider

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style>
.headerness {
background: black;
width: 100%;
height: 80px;
z-index: 2;
position: relative;
}

.headerness a {
color: white;
padding: 30px 20px 20px 20px;
display: block;
float: left;
font-family: "Coming Soon", cursive;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
}

li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}

body {
margin: 0;
}

.slide {
background-size: cover !important;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.slide-one {
background: url("http://dragonflyhealing.files.wordpress.com/2010/07/dolphin-sunset.jpg");
}

.slide-two {
background: url("http://www.septembersea.com/images/Sunrises%20to%20Sunsets/Website%20Psychedelic%20Sunset.jpg")
no-repeat;
}

.slide-three {
background: url("http://images.boomsbeat.com/data/images/full/17082/sunset_5-jpg.jpg")
no-repeat;
}

.slide-four {
background: url("http://blog.travefy.com/wp-content/uploads/2013/07/wonderful-beach-hd-wallpaper-nature-amp-landscape-wallpapers.jpg")
no-repeat;
}

.slide-five {
background: url("http://desktopbackgroundshq.com/backgrounds/sea-beach-palm-beach-backgrounds-beach-palm-sea-25534.jpg")
no-repeat;
}

h2 {
widows: 100%;
text-align: center;
position: absolute;
text-transform: uppercase;
text-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
font-family: "Quicksand", sans-serif;
font-size: 60px;
margin: 0;
transition: all 1s ease-in;
transition-delay: 1s;
color: white;
bottom: 2%;
left: 0;
right: 0;
margin: auto;
opacity: 0;
}
.slide.active h2 {
opacity: 1;
bottom: 5%;
-webkit-animation: myfirst 2s 5s forwards; /* Safari 4+ */
-moz-animation: myfirst 2s 5s forwards; /* Fx 5+ */
-o-animation: myfirst 2s 5s forwards; /* Opera 12+ */
animation: myfirst 2s 5s forwards; /* IE 10+, Fx 29+ */
animation: myfirst 2s 5s forwards;
}
/*--currently will ony work in firefox--*/
@-webkit-keyframes myfirst {
0% {
opacity: 1;
}
100% {
opacity: 0;
bottom: 20%;
}
}

@-o-keyframes myfirst {
0% {
opacity: 1;
}
100% {
opacity: 0;
bottom: 20%;
}
}

@keyframes myfirst {
0% {
opacity: 1;
}
100% {
opacity: 0;
bottom: 20%;
}
}

</style>
<ul>
<li class="slide-one slide">
<h2>Beautiful Sunset</h2>
</li>
<li class="slide-two slide">
<h2>Another nice sunset</h2>
</li>
<li class="slide-three slide">
<h2>Lushious</h2>
</li>
<li class="slide-four slide">
<h2>mmmmm...</h2>
</li>
<li class="slide-five slide">
<h2>Been here!</h2>
</li>
</ul>

<div class="headerness">
<ul class="nav">
</li><a href="#">Home</a></li>
</li><a href="#">About</a></li>
</li><a href="#">Help</a></li>
</li><a href="#">Get in touch</a></li>
</ul>
</div>

<script>
$(".slide-one").delay(500).addClass("active");
//$('.slide-one h2').animate({
//opacity: 0,
//top: '-400px',
//opacity: 1,
//top: '20px',

//}, 4000, function() {
// Animation complete.
//});

$(".slide-one, .slide-two, .slide-three, .slide-four, .slide-five").hide();

var slides = $("ul li.slide"),
i = 0;

$(slides[0]).show();
(function loop() {
slides
.delay(3000)
.fadeOut("slow")
.eq(++i % slides.length)
.fadeIn("slow", function () {
console.log($(this));
$(this).addClass("active").siblings().removeClass("active");
if ($(".slide").hasClass("active")) {
}
loop();
});
})();

</script>