Image Slider using HTML, CSS and JavaScript

Hi Friends, In this tutorial we will see how to code for a beautiful image slider using html, css and javascript.

We need image slider for each website to design.

Here this code is very simple to understand and simple to apply to your websites.

index.html

Select this html code, copy and create a html file as index.html and paste this code and save it.

<!doctype html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"> 1 / 3 </div>
<img src="image/b1.jpg" style="width:100%">
<div class="text"> Caption text One </div>
</div>

<div class="mySlides fade">
<div class="numbertext"> 2 / 3 </div>
<img src="image/b2.jpg" style="width:100%">
<div class="text"> Caption text Two </div>
</div>

<div class="mySlides fade">
<div class="numbertext"> 3 / 3 </div>
<img src="image/b2.jpg" style="width:100%">
<div class="text"> Caption text 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>

style.css

Select this css code, copy and create a css file as style.css and paste this code and save it.

* {box-sizing:border-box;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* 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: 13px;
width: 13px;
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}
}

script.js

This is script code for the slider, select this code, copy and create a script file as script.js and paste this code and save it.

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";
}

image

Create a folder name as image and keep your images inside this folder.

Comments

Post a Comment