A fully responsive background image slideshow with CSS3 powered fade transitions and next/prev/autoplay/pause controls.
Written in Vanilla JavaScript and CSS transitions.
1. Add as many slides to the slideshow.
<ul id="all_slides">
<li class="slide active"></li>
<li class="slide"></li>
<li class="slide"></li>
...
</ul>
2. Add controls (next, previous, play/pause) to the slideshow. In this example, we’re going to use Font Awesome iconic font for the control icons.
<div class="buttons">
<button class="controls" id="previous"><i class="far fa-arrow-alt-circle-left"></i></button>
<button class="controls" id="pause"><i class="far fa-pause-circle"></i></button>
<button class="controls" id="next"><i class="far fa-arrow-alt-circle-right"></i></button>
</div>
3. The core CSS styles for the slideshow.
#all_slides{
position: relative;
height: 100vh;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.active{
opacity: 1;
z-index: 2;
}
.slide{
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
background-size: cover;
}
4. Add background images to the slides.
.slide:nth-of-type(1){
background-image: url('1.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.slide:nth-of-type(2){
background-image: url('2.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
.slide:nth-of-type(3){
background-image: url('3.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat
}
5. The CSS rules for the controls.
.controls{
display: none;
}
.controls{
display: inline-block;
position: relative;
top: 1rem;
right: .5rem;
border: none;
outline: none;
font-size: 20px;
cursor: pointer;
border: 2px solid #fff;
border-radius: 1.5rem;
background: gold;
width: 3rem;
height: 3rem;
margin-left: .5rem;
}
.controls:hover,
.controls:focus{
background: #eee;
color: #333;
}
.container{
position: relative;
}
.buttons{
position: absolute;
right: .5rem;
top: 0px;
z-index: 10;
font-size: 0px;
}
6. Load the main script at the end of the document. Done.
<script src="static/js/main.js"></script>
Author: PiusLucky
Live Demo: https://z-image-slider.netlify.app/
GitHub: https://github.com/PiusLucky/Image-Slider
#javascript #css