Hey friends, today in this blog you’ll learn Responsive Image Slider | With Manual Button & Auto-play – Html Css Javascript . Earlier I’ve shared a blog on Responsive Navigation Bar Design using HTML and CSS . In this blog, I’m going to create a Responsive Image Slider Using Html Css Javascript .
Today in this blog I’ll share the Responsive Image Slider | With Manual Button & Auto-play. In this slider, there are five images, and these images automatically change after a certain period. I used JavaScript code to change the image after a certain time interval. If you don’t know JavaScript then you can watch this vedio where I’ve created an Automatic Image Slider in HTML & CSS.
Video Tutorial of Responsive Image Slider Using Html Css Javascript
You might like this:
- Responsive Image gallery
- Create a Portfolio Filter Using Html Css & Javascript
- Complete Responsive Ecommerce Website Using Html Css
Responsive Image Slider [Source Codes]
To create this Responsive Image Slider Using Html Css Javascript . First, you need to create Three files, HTML File , CSS File and Javascript File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Responsive Image Slider from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.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>
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
/* COPYRIGHT- CODING WITH NICK*/
* {
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: 80%;
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 {
-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) {
.prev, .next,.text {font-size: 11px}
.dot{
height: 10px;
width: 10px;
}
@media only screen and (max-width: 500px) {
.prev, .next,.text {font-size: 14px}
}
# JS CODE
Last, create a JavaScript file( script.js ) and paste the given codes in your JavaScript file.
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("mySlides");
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";
}
// Auto Slide if you need auto slide ,remove the commit "//"
//var slideIndex = 0;
//showSlides();
//function showSlides() {
//var i;
// var slides = document.getElementsByClassName("mySlides");
// for (i = 0; i < slides.length; i++) {
// slides[i].style.display = "none";
// }
// slideIndex++;
// if (slideIndex > slides.length) { slideIndex = 1 }
// slides[slideIndex - 1].style.display = "block";
// setTimeout(showSlides, 2000); // Change image every 2 seconds
//}
That’s all, now you’ve successfully Create a Responsive Image Slider Using Html Css Javascript. If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button
I Hope this blog will be helpful.
Read More –
