Full page image slider carousel that you can overlap with text and buttons
<html>
<head>
<style>
body {
margin: 0;
}
.slider {
overflow: hidden;
width: 100%;
height: 100vh;
position: relative;
}
.slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
animation: slider 22.5s infinite;
}
.slider .slide:nth-child(1) {
animation-delay: 0s;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(" image goes here ");
}
.slider .slide:nth-child(2) {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(" image goes here ");
animation-delay: -4.5s;
}
.slider .slide:nth-child(3) {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(" image goes here ");
animation-delay: -9s;
}
.slider .slide:nth-child(4) {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(" image goes here");
animation-delay: -13.5s;
}
.slider .slide:nth-child(5) {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(" image goes here ");
animation-delay: -18s;
}
@keyframes slider {
0%, 13%, 100% {
transform: translateX(0);
animation-timing-function: ease;
}
20% {
transform: translateX(-100%);
animation-timing-function: step-end;
}
93% {
transform: translateX(100%);
animation-timing-function: ease;
}
}
</style>
</head>
<body>
<div class="slider">
<div class="slide" alt=""></div>
<div class="slide" alt=""></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</body>
</html>
Check out our library of code snippets and site enhancements.
