Today we will discuss and look at how to create an image slider using HTML, CSS, and JS. On various popular websites, you may have seen an image sliding feature. There, the users are able to slide images to the left or right using the arrow, drag feature, or the slider dot buttons. So, today we will create that image sliding feature just by using HTML, CSS, and JS.
You will discover how to make an image slider using HTML, CSS, and JavaScript in today’s blog post. You can improve your HTML, CSS, and JavaScript coding skills by making an image slider. Also, if you are an enthusiast to learn front-end languages then you can learn on w3schools.
Table of Contents
How to create an image slider using HTML, CSS, and JS? So, here are the steps that you need to follow:
Please follow the given steps to create an image slider using HTML, CSS, and JS:
- At first, create a folder and name the folder you want (e.g.: Image Slider), and inside this folder create the mentioned files with proper naming.
- Create an
index.htmlfile. Here, “.html” indicates the extension of the file type and therefore, you can identify that this file is the HTML file. - Again, create a
style.cssfile. Here, “.css” indicates the extension of the file type and therefore, you can identify that this file is the CSS file. - After, the CSS file, create a
script.jsfile. Here, “.js” indicates the extension of the file type, and therefore, you can identify that this file is the JS file.
Once you create those files, paste the given code into the respective file.
Firstly, paste the following code into your index.html file. In the HTML file, the CSS file is linked before the closing of the head tag (</head>), and the JS file is linked before the closing of the body tag (</body>) as you can see in this HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider Using HTML | CSS | JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="script.js"></script>
</body>
</html>Secondly, paste the following code into your style.css file. The style.css file is used for the styling of the image slider.
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}And, finally, paste the following codes into your script.js file. The script.js file is used to create the functionalities of the image slider.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}That’s all, we have successfully created an Image slider. So, in this blog post, we’ve learned how to create a simple image slider using HTML, CSS, and JS. Those who already have a basic understanding of front-end languages like HTML, CSS, and JS can easily understand the methods that are explained in this blog post.
Also Read: The Essentials of ‘CSS Flex’ for Developers
