A Simple Image Slider in HTML, CSS and JavaScript
This Slider allows the user to navigate between slides using radio or Arrow buttons manually. It also provides an automatic slide show functionality that transitions between slides after a specified time.
The source code can be accessed here.
First things first, go ahead and set up a new folder. I’m gonna call it “IMAGE SLIDER” but you can call yours whatever you want. Next add 3 more folders to that one called “js”, “css”, and “image”.
Go ahead and open that folder in the text editor of your choice, I use Visual Studio and make a new file called index.html at the root of your project. next, create a “style.css” file in the CSS folder and a “script.js” file in the js folder.
Now, you should have a project that looks something like this:
Now, go ahead and add your images to the image folder, it doesn’t matter how many, what size, or what format, but the naming is very important.
let’s dive into the HTML structure of this simple slider:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="slider">
<input type="radio" name="sld" id="slide1">
<input type="radio" name="sld" id="slide2">
<input type="radio" name="sld" id="slide3">
<input type="radio" name="sld" id="slide4">
<input type="radio" name="sld" id="slide5">
<!-- slides -->
<div class="slides">
<div class="slide sli">
<img src="image/image1.jpg" alt="slide1">
</div>
<div class="slide">
<img src="image/image2.jpg" alt="slide2">
</div>
<div class="slide">
<img src="image/image3.jpg" alt="slide3">
</div>
<div class="slide">
<img src="image/image4.jpg" alt="slide4">
</div>
<div class="slide">
<img src="image/image5.jpg" alt="slide5">
</div>
</div>
<a href="#" class="arrow left"><i class="fas fa-arrow-circle-left"></i></a>
<a href="#" class="arrow right"><i class="fas fa-arrow-circle-right"></i></a>
<div class="radio">
<label for="slide1" class="radbtn active"></label>
<label for="slide2" class="radbtn"></label>
<label for="slide3" class="radbtn"></label>
<label for="slide4" class="radbtn"></label>
<label for="slide5" class="radbtn"></label>
</div>
</div>
<script src="./js/script.js"></script>
</body>
</html>
This HTML code creates a basic image slider with navigation arrows and radio buttons for controlling the slides. The associated CSS and JavaScript files are referenced to provide the styling and interactivity of the slider.
Here’s an explanation of the code:
1. The document structure:
The “<html>” tag is the root element. The “<head>” section contains meta information and external CSS and font-awesome library references. The “<body>” section contains the content of the webpage.
2. Image Slider:
The image slider is created using a “<div>” element with the class “slider”. It contains a set of radio buttons (<input type=” radio”>) to control the slides. Each radio button has a unique ID (“slide1”, “slide2”, etc.) and is associated with a specific slide.
3. Slides:
The slides are wrapped in a “<div>” element with the class “slides”. Each slide is represented by a “<div>” element with the class “slide”. Inside each slide, an “<img>” tag is used to display an image. The “src” attribute specifies the path to the image file, and the “alt” attribute provides alternative text for the image.
4. Navigation:
Navigation arrows are included as “<a>” tags with the classes “left” and “right”. The left arrow contains a font-awesome icon for the left arrow. The right arrow contains a font-awesome icon for the right arrow.
5. Radio Buttons:
The radio buttons are represented by “<label>” tags with the class “radbtn”. Each “<label>” tag is associated with a specific radio button using the “for” attribute.
6. JavaScript Tag:
The script tag “<script src=”./js/script.js”></script>” references an external JavaScript file named “script.js”. This file likely contains the logic for controlling the image slider functionality.
Next, we have the CSS, which is central to this front-end project:
/* slider */
input[type="radio"]{
display: none;
}
.slider {
width: 100%;
height: 100vh;
background-color: #1f242d;
color: #fff;
}
.slider .slides {
position: relative;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
.slider .slides .slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
display: flex;
transition: all 0.5s ease-in;
}
.slider .slide .sli {
opacity: 1;
}
.slider .slides .slide::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.1;
z-index: 1;
}
.slider .slide img {
min-width: 70%;
min-height: 70%;
object-fit: cover;
transform: scale(1);
transition: all 0.5 ease-in;
margin: 10rem 14rem;
}
.slider .arrow {
position: absolute;
text-decoration: none;
z-index: 10;
color: #fff;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
transition: all 0.3 ease-in;
}
.slider .arrow:hover {
opacity: 1;
}
.slider .arrow i {
font-size: 3rem;
}
.slider .left {
left: 70px;
}
.slider .right {
right: 70px;
}
.slider .radio {
width: 100%;
position: absolute;
bottom: 20px;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
.slider .radio .radbtn {
width: 16px;
height: 16px;
border: 2px solid #fff;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease-in;
}
.slider .radio .radbtn:hover {
background-color: #fff;
border-radius: 30%;
}
.active{
background-color: #fff;
}
This CSS code provides the necessary styles to create an attractive and functional image slider with navigation arrows and radio buttons for controlling the slides.
1. Styling for radio buttons:
The ‘input[type=” radio”]’ selector hides the radio buttons using “display: none;”.
2. Styling for the slider container:
The “.slider” class sets the width and height to 100% of the viewport (100vh). The background colour is set to “#1f242d” (a dark shade of blue). The text colour is set to white (#fff).
3. Styling for the slides container:
The “.slider .slides” class sets the slides container to a relative position and sets its width and height to 100%. The container uses flexbox (display: flex;) for slide alignment. The “overflow” property is set to hidden to hide any overflow content.
4. Styling for individual slides:
The “.slider .slides .slide” class sets each slide to an absolute position within the container. The width and height are set to 100%. The initial opacity is set to 0 to hide the slides. The “transition” property is used to create a smooth transition effect with a duration of 0.5 seconds.
5. Styling for active slide:
The “.slider .slide .sli” class sets the opacity of the active slide to 1, making it visible.
6. Styling for slide overlay:
The “.slider .slides .slide::after” pseudo-element creates an overlay effect. It is positioned absolutely at the top-left corner, covering the entire slide. The background colour is set to black (#000). The opacity is set to 0.1 to create a semi-transparent effect. The “z-index” property is set to 1 to ensure it appears below the slide content.
7. Styling for slide images:
The “.slider .slide img” class sets the minimum width and height of the slide images to 70%. The “object-fit” property is set to cover to ensure the image fills the container while maintaining its aspect ratio. The “transform” and “transition” properties are used for scaling and creating a smooth transition effect. The “margin” property is set to create spacing around the images.
8. Styling for navigation arrows:
The “.slider .arrow” class styles the navigation arrows. The position is set to absolute, and the “top” and “transform” properties are used for vertical centring. The initial opacity is set to 0.5, and the “transition” property is used to create a smooth transition effect. The “:hover” pseudo-class is used to change the opacity to 1 on hover. The font-awesome icons are styled using the “.slider .arrow I” selector.
9. Styling for left and right arrows:
The “.slider .left” and “.slider .right” classes position the arrows on the left and right sides, respectively.
10. Styling for radio buttons:
The “.slider .radio” class positions the radio buttons at the bottom of the slider container. It uses flexbox for centering (display: flex; justify-content: center; align-items: center;). The “.slider .radio .radbtn” class styles the individual radio buttons. The width and height are set to create circular buttons with a white border. The “margin” property creates spacing between the buttons. The “cursor” property sets the cursor to a pointer on hover. The “transition” property creates a smooth transition effect on hover. The “.slider .radio .radbtn:hover” class changes the background colour and border radius on hover. The “.active” class is used to highlight the active radio button by changing its background colour.
Lastly, we will look at JavaScript. The JavaScript code you provided is responsible for the functionality of the image slider.
//slider
// create variable
var slide = document.querySelectorAll('.slide');
var radiobtn = document.querySelectorAll('.radbtn');
var leftArrow = document.querySelector('.left');
var rightArrow = document.querySelector('.right');
var slideInt;
var intTime = 5000; // 5s(5000ms)
//iterate all radio btn
radiobtn.forEach(function(item, index) {
item.addEventListener('click', function() {
manButtonNav(index);
});
});
rightArrow.addEventListener('click', function(e) {
e.preventDefault();
nextSlide();
clrInterval();
});
leftArrow.addEventListener('click', function(e) {
e.preventDefault();
prevSlide();
clrInterval();
});
function manButtonNav(index) {
for(var i = 0; i < slide.length; i++) {
if(i !== index) {
slide[i].classList.remove('sli');
radiobtn[i].classList.remove('active');
}
else {
slide[index].classList.add('sli');
radiobtn[index].classList.add('active');
}
}
clrInterval();
}
//next slide function
function nextSlide() {
var sli = document.querySelector('.sli');
var active = document.querySelector('.active');
//unset current slide and radio btn
sli.classList.remove('sli');
active.classList.remove('active');
//set next slide and radio btn
if(sli.nextElementSibling) {
sli.nextElementSibling.classList.add('sli');
active.nextElementSibling.classList.add('active');
}
else {
slide[0].classList.add('sli');
radiobtn[0].classList.add('active');
}
}
//previous slide function
function prevSlide() {
var sli = document.querySelector('.sli');
var active = document.querySelector('.active');
//unset current slide and radio btn
sli.classList.remove('sli');
active.classList.remove('active');
//set next slide and radio btn
if(sli.previousElementSibling) {
sli.previousElementSibling.classList.add('sli');
active.previousElementSibling.classList.add('active');
}
else {
jeepslide[slide.length - 1].classList.add('sli');
radiobtn[radiobtn.length - 1].classList.add('active');
}
}
function clrInterval() {
clearInterval(slideInt);
slideInt = setInterval(nextSlide, intTime);
}
slideInt = setInterval(nextSlide, intTime);
This JavaScript code provides the necessary functionality to manually navigate between slides using radio or arrow buttons. It also includes an automatic slide transition feature.
1. Variable Declarations:
The “slide” variable stores an array of all slide elements. The “radiobtn” variable stores an array of all radio button elements. The “leftArrow” variable stores a reference to the left arrow element. The “rightArrow” variable stores a reference to the right arrow element. The “slideInt” variable stores the interval ID for the slide interval. The “intTime” variable stores the duration of each slide in milliseconds.
2. Radio Button Event Listeners:
The code iterates through each radio button using the “forEach” method. An event listener is added to each radio button, triggering the “manButtonNav” function when clicked. The “manButtonNav” function is responsible for handling the navigation when a radio button is clicked.
3. Arrow Button Event Listeners:
Event listeners are added to the left and right arrow buttons. When clicked, the “nextSlide” or “prevSlide” function is called, respectively. The “clrInterval” function is also called to clear the slide interval and restart it.
4. “manButtonNav” Function:
This function handles the navigation when a radio button is clicked. It iterates through all the slides and radio buttons. If the current index does not match the clicked index, the corresponding slide and radio button are removed from the “active” state. If the current index matches the clicked index, the corresponding slide and radio button are added to the “active” state. The “clrInterval” function is called to clear the slide interval and restart it.
5. “nextSlide” Function:
This function handles the transition to the next slide. It gets the current slide and active radio button using “querySelector”. The current slide and active radio button are removed from the “sli” and “active” states. If there is a next sibling slide, if so, it adds the appropriate classes to the next slide and radio buttons. If there is no next sibling slide, it selects the first slide and radio button to create a loop effects.
6. “prevSlide” Function:
This function handles the transition to the previous slide. It follows a similar logic to the nextSlide function but handles the previous sibling slide instead.
7. “clrInterval” Function:
This function clears the slide interval using “clearInterval”. It is called before navigating to the next or previous slide to ensure smooth manual navigation. After clearing the interval, it sets a new interval using “setInterval” and the “nextSlide” function.
8. Initial Slide Interval:
The slide interval is initially set using “setInterval” and the “nextSlide” function. This starts the automatic transition between slides based on the specified “intTime” duration.