How To Create a Responsive Image Slider In HTML
Easy way to create a responsive Image Slider using HTML CSS and JavaScript
Hello friends, welcome to blogEarns. In this post we will learn how to create an automatic and manual image slider using HTML CSS and JavaScript. This image slider can be used to beautify your blog post by adding it at the top of the post or anywhere as per your requirement.
In this post we will learn two different styles of Image Slider which is as follows:
- Automatic Image Slider
- Clickable Image Slider
Let's start with clickable Image Slider first...
#1. On-Click Image Slider
Image Slider is nothing but a Slideshow which is used to cycle through elements (in our case elements are Images) available.
For creating on-click Image Slider we will use HTML, CSS, and JavaScript.
HTML Code
Below is the HTML code, with this code we will design our Image slider interface. You can change this code to design as per your requirement. Here I am only focusing on Image Slider interface. In the code below you need to put image address (img src="image.jpg")only. I took five images in my Image Slider code, you can take as many as you want, but don't forget to make required changes. Copy the given code and paste it to your code editor and save it with an extension dot html (filename.html).
<div class="slider-box">
<div class="slider fade">
<div class="numIndicator">1 / 5</div>
<img src="" style="width:100%" alt="ImageSlide1">
<div class="text">Caption Text</div>
</div>
<div class="slider fade">
<div class="numIndicator">2 / 5</div>
<img src="" style="width:100%" alt="ImageSlide2">
<div class="text">Caption Two</div>
</div>
<div class="slider fade">
<div class="numIndicator">3 / 5</div>
<img src="" style="width:100%" alt="ImageSlide3">
<div class="text">Caption Three</div>
</div>
<div class="slider fade">
<div class="numIndicator">4 / 5</div>
<img src="" style="width:100%" alt="ImageSlide4">
<div class="text">Caption Four</div>
</div>
<div class="slider fade">
<div class="numIndicator">5 / 5</div>
<img src="" style="width:100%" alt="ImageSlide5">
<div class="text">Caption Five</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>CSS Code
To design Image Slider interface we need to write some CSS code. CSS is nothing but Cascading Style sheet. We use CSS to manipulate DOM using html elements, by ID, or by class. You just copy this code and paste it to your project stylesheet.
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.slider {display: none}
img {vertical-align: middle;}
.slider-box {
max-width: 1000px;
position: relative;
margin: auto;
}
.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;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numIndicator {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.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;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}JavaScript Code
So far we are done with our HTML and CSS code. Upto this we have completed creation of Interface using HTML code and designed Image Slider using CSS code. Now its time to start sliding of Images for that we need to write some JavaScript code which is as follows:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slider");
var 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";
}Output - Clickable Image Slider
Check out the output of what we've done so far. At either end, there is previous and next indicator, clicking it will slide the previous and next image respectively
#2. Automatic Image Slider Using HTML CSS and JavaScript
Automatic Image Slider is a Image slider in which images with slide one by one automatically. Automatic Image Slider is much more similar to on-click Image Slider only few changes are there which you can notice very easily. In this automatic image slider image will change after every seconds, you can change the time by changing the script's setTimeout function (2000 refers to 2 seconds). So, let's start with HTML code for automatic image slider.
HTML Code
Copy the HTML code below and paste it into your html project block.
<div class="autoSlide-box">
<div class="autoSlides fade">
<div class="slideNum">1 / 3</div>
<img src="" style="width:100%">
<div class="cap">Caption Text</div>
</div>
<div class="autoSlides fade">
<div class="slideNum">2 / 3</div>
<img src="" style="width:100%">
<div class="cap">Caption Two</div>
</div>
<div class="autoSlides fade">
<div class="slideNum">3 / 3</div>
<img src="" style="width:100%">
<div class="cap">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="doot"></span>
<span class="doot"></span>
<span class="doot"></span>
</div>CSS Code
Copy the CSS code below and paste it into the style block of your project.
.autoSlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.autoSlide-box {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.cap {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.slideNum {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.doot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}JavaScript Code
So far we completed HTML and CSS part of the automatic image slider. Now add JavaScript code to make the project functional. Copy the JavaScript code below:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("autoSlides");
var dots = document.getElementsByClassName("doot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}Output Automatic Image Slider
See below how the automatic Image Slider works.
Conclusion
Hey guys, I hope you now understand the concept of On-click and automatic Image slider. If you have any query regarding this feel free to write in the comment or you can mail me karunasingh@blogearns.com
