How to Create Effective Image Slider Easily in Html
METHOD1:
/* Note: First of all create an external css (say chlImageSlider.css) and javascript page/file (say chlImageSlider.js) and save both the file in the same directory/folder(say ImageSlider) where we will create or save an html slider page/file(say chlImageSlider.html) in any hard drive of the computer system. Now we create a new image/picture folder (say Image) where we store several images/pictures to run/appear in the slides.Now the css code is - */
*{
box-sizing:border-box;
}
body{
font-family: Verdana,sans-serif;
margin:0;
}
.mySlides{
display:none;
}
.slideshow-container{
max-width: 1000px; /*To give the maximum width of slide show container*/
position: relative;
margin: auto;
}
/* code for next & previous buttons */
.prev,.next{
cursor: pointer; /*Make the cursor as hand symbol*/
position: absolute;
top: 50%; /*To give the position from top*/
width: auto;
padding: 16px; /*To increase the width of button using paddding*/
margin-top: -42px;
color: red; /*You can change the color from red to white*/
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.prev{
left: 0;
}
.next /* Position the "next button symbol" to the right */
{
right: 0; /*To give the position of next button to the right since next button
situtated above the previous button*/
border-radius: 3px 0 0 3px; /*Top right and bottom right will be round with 3px
border*/
}
/* 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; /*To give the color of number text*/
font-size: 12px; /*Font size of numbertext*/
padding: 8px 12px; /*Set the position of numbertext*/
position: absolute;
top: 0; /*Position from top of number text*/
}
/* The dots/bullets/indicators */
.dot
{
cursor:pointer; /*make the hand symbol*/
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;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px){
.prev,.next,text {font-size: 11px}
}
/* NB: Save the above css page code as chlImageSlider.css in same folder/directory where html page/file is saved. Now write java script code - */
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";
}
var slideIndex1 = 0;
showSlides1();
function showSlides1()
{
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
slideIndex1++;
if(slideIndex1 > slides.length)
{
slideIndex1 = 1;
}
for(i=0; i<dots.length; i++)
{
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
setTimeout(showSlides1, 2000); // Here 2000 milliseconds changes slides image every 2
seconds.
}
/* NB: Now Save the above java script code/page as chlImageSlider.js in same folder/directory where html page/file is saved. Now finally write html page code where image slider will appear. The html page code is - */
<html>
<head>
<title>Codershelpline.com</title>
<!-- Calling of external css chlImageSlider.css to take effect in image slider,
which is already saved in same folder where html page is saved -->
<link rel="stylesheet" type="text/css" href="chlImageSlider.css">
</head>
<body>
<form name="form1">
<center>
<div style="width: 950px; height: 588px; border: none; margin-top: 30px;">
<div class="slideshow-container">
<div class="mySlides fade" style="display: block;">
<div class="numbertext">Put a Caption Name or 1 / 7 here </div>
<img src="Image/img1.jpg" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">2 / 7</div>
<img src="Image/img2.jpg" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">3 / 7</div>
<img src="Image/img3.png" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">4 / 7</div>
<img src="Image/img4.jpg" style="width:100%; height:550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">5 / 7</div>
<img src="Image/img5.bmp" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">6 / 7</div>
<img src="Image/img6.jpg" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">7 / 7</div>
<img src="Image/img7.png" style="width:100%; height: 550px">
</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 active" 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>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
</div>
<!-- Call of external javascript file chlImageSlider.js to take effect
in html slider page, already saved in same folder where html
slider page is saved. -->
<script type="text/javascript" src="chlImageSlider.js"></script>
</div>
</center>
</form>
</body>
</html>
<!-- NB: Now finally Save the above html page code as chlImageSlider.html in a
folder/directory say ImageSlider in any hard drive.Now run the html slider page. -->
/* Note: First of all create an external css (say chlImageSlider.css) and javascript page/file (say chlImageSlider.js) and save both the file in the same directory/folder(say ImageSlider) where we will create or save an html slider page/file(say chlImageSlider.html) in any hard drive of the computer system. Now we create a new image/picture folder (say Image) where we store several images/pictures to run/appear in the slides.Now the css code is - */
*{
box-sizing:border-box;
}
body{
font-family: Verdana,sans-serif;
margin:0;
}
.mySlides{
display:none;
}
.slideshow-container{
max-width: 1000px; /*To give the maximum width of slide show container*/
position: relative;
margin: auto;
}
/* code for next & previous buttons */
.prev,.next{
cursor: pointer; /*Make the cursor as hand symbol*/
position: absolute;
top: 50%; /*To give the position from top*/
width: auto;
padding: 16px; /*To increase the width of button using paddding*/
margin-top: -42px;
color: red; /*You can change the color from red to white*/
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.prev{
left: 0;
}
.next /* Position the "next button symbol" to the right */
{
right: 0; /*To give the position of next button to the right since next button
situtated above the previous button*/
border-radius: 3px 0 0 3px; /*Top right and bottom right will be round with 3px
border*/
}
/* 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; /*To give the color of number text*/
font-size: 12px; /*Font size of numbertext*/
padding: 8px 12px; /*Set the position of numbertext*/
position: absolute;
top: 0; /*Position from top of number text*/
}
/* The dots/bullets/indicators */
.dot
{
cursor:pointer; /*make the hand symbol*/
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;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px){
.prev,.next,text {font-size: 11px}
}
/* NB: Save the above css page code as chlImageSlider.css in same folder/directory where html page/file is saved. Now write java script code - */
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";
}
var slideIndex1 = 0;
showSlides1();
function showSlides1()
{
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
slideIndex1++;
if(slideIndex1 > slides.length)
{
slideIndex1 = 1;
}
for(i=0; i<dots.length; i++)
{
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
setTimeout(showSlides1, 2000); // Here 2000 milliseconds changes slides image every 2
seconds.
}
/* NB: Now Save the above java script code/page as chlImageSlider.js in same folder/directory where html page/file is saved. Now finally write html page code where image slider will appear. The html page code is - */
<html>
<head>
<title>Codershelpline.com</title>
<!-- Calling of external css chlImageSlider.css to take effect in image slider,
which is already saved in same folder where html page is saved -->
<link rel="stylesheet" type="text/css" href="chlImageSlider.css">
</head>
<body>
<form name="form1">
<center>
<div style="width: 950px; height: 588px; border: none; margin-top: 30px;">
<div class="slideshow-container">
<div class="mySlides fade" style="display: block;">
<div class="numbertext">Put a Caption Name or 1 / 7 here </div>
<img src="Image/img1.jpg" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">2 / 7</div>
<img src="Image/img2.jpg" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">3 / 7</div>
<img src="Image/img3.png" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">4 / 7</div>
<img src="Image/img4.jpg" style="width:100%; height:550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">5 / 7</div>
<img src="Image/img5.bmp" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">6 / 7</div>
<img src="Image/img6.jpg" style="width:100%; height: 550px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">7 / 7</div>
<img src="Image/img7.png" style="width:100%; height: 550px">
</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 active" 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>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
</div>
<!-- Call of external javascript file chlImageSlider.js to take effect
in html slider page, already saved in same folder where html
slider page is saved. -->
<script type="text/javascript" src="chlImageSlider.js"></script>
</div>
</center>
</form>
</body>
</html>
<!-- NB: Now finally Save the above html page code as chlImageSlider.html in a
folder/directory say ImageSlider in any hard drive.Now run the html slider page. -->
----------------------------------- OR -----------------------------------
----------------------------------- OR -----------------------------------METHOD 2:
HTML Page:('Home.html' page located inside the project folder)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/AneyCSS.css">
<title>Fashion Boutique</title>
<style>
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
ul
{
list-style: none;
}
li
{
float: left;
display: block;
}
li a
{
text-decoration: none;
font-size: 14px;
color: springgreen;
padding: 15px;
font-weight: bold;
}
li a:hover
{
background: #FFD805;
}
.active
{
background: #CB00FF;
}
</style>
</head>
<body style="background: url('images/12313.png'); background-repeat: no-repeat; background-size: cover;">
<div style="height: 120px; line-height: 120px; width: 100%; background: linear-gradient(orangered,orange); text-align: center">
<span style="color: springgreen; font-size: 50px; font-family: Antique Beauty; font-weight: bold">Online Fashion Boutique Management System</span>
</div>
<div style="height: 50px; width: 100%; background: linear-gradient(orange, red); border-top: 2px solid red;">
<center>
<ul>
<li><a href="home.php" class="active">HOME</a></li>
<li><a href="customermaster.php">CUSTOMER</a></li>
<li><a href="ownermaster.php">OWNER</a></li>
<li><a href="modelmaster.php">MODEL</a></li>
<li><a ref="photographermaster.php">PHOTOGRAPHER</a>
</li>
<li><a href="designermaster.php">DESIGNER</a></li>
<li><a href="reportcustomer.php">REPORT</a></li>
<li><a href="login.php">LOGIN</a></li>
<li><a href="contact.php">CONTACT US</a></li>
</ul>
</center>
</div>
<center>
<fieldset style="width: 950px; height: 588px; border: none; margin-top: 30px;">
<div class="slideshow-container">
<div class="mySlides fade" style="display: block;">
<div class="numbertext">1 / 6</div>
<img src="images/1.jpg" style="width:100%; height: 500px"><!--You can give height and width according to your choice-->
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">2 / 6</div>
<img src="images/2.jpg" style="width:100%; height: 500px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">3 / 6</div>
<img src="images/3.jpg" style="width:100%; height: 500px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">4 / 6</div>
<img src="images/4.jpg" style="width:100%; height: 500px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">5 / 6</div>
<img src="images/5.jpg" style="width:100%; height: 500px">
</div>
<div class="mySlides fade" style="display: none;">
<div class="numbertext">6 / 6</div>
<img src="images/6.jpg" style="width:100%; height: 500px">
</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 active" 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>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
<script type="text/javascript" src="JavaScript/AneyJavaScript.js"></script>
</fieldset>
</center>
<div style="width: 100%; text-align: center; font-weight: bold; background: linear-gradient(orange, orangered); height: 100px; line-height: 50px">
<span style="color: blueviolet; font-size: 18px; padding-top: 100px;">
Copyright © 2023, All Rights Reserved. Developed By <span style="text-transform: uppercase; color: ghostwhite">Candidate Name.</span> Under The Guidance Of <span style="text-transform: uppercase; color: darkmagenta">Guider Name.</span>
<br/>
<a href="Contact.php" style="color: darkviolet; text-decoration: none;">Contact Us</a> ||
<a href="#" style="color: darkviolet; text-decoration: none; ">About Us</a> ||
<a href="#" style="color: darkviolet; text-decoration: none;">FAQ</a> ||
<a href="Feedback.php" style="color: darkviolet; text-decoration: none;">Feedback</a>
</span>
</div>
</body>
</html>
---------------------------------------------------
CSS Page:('CSS/AneyCSS.css' file is located inside the project folder)
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Oct 7, 2017, 8:29:25 AM
Author : RAJESH
*/
*{
box-sizing:border-box;
}
body{
font-family: Verdana,sans-serif;
margin:0;
}
.mySlides{
display:none;
}
/* Slideshow container */
.slideshow-container{
max-width: 1000px; /*TO give the maximum width of slide show container if you increase the size width of slider will be increase and vice-versa*/
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,.next{
cursor: pointer; /*Make hand symbol*/
position: absolute;
top: 50%; /*To give the position from top*/
width: auto;
padding: 16px; /*TO increase the width of button using paddding*/
margin-top: -42px;
color: red; /*Yoou can change the color from red to white*/
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.prev
{
left: 0;
}
/* Position the "next button" to the right */
.next
{
right: 0; /*TO give the position of next button to the right since next button situtated above the previous button*/
border-radius: 3px 0 0 3px; /*Top right and bottom right will be round with 3px border*/
}
/* 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; /*To give the color of number text*/
font-size: 12px; /*Font size of numbertext*/
padding: 8px 12px; /*Set the position of numbertext*/
position: absolute;
top: 0; /*Position from top of number text*/
}
/* The dots/bullets/indicators */
.dot
{
cursor:pointer; /*make the hand symbol*/
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;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px){
.prev,.next,text {font-size: 11px}
}
-----------------------------------------------
Java Script Page:('JavaScript/AneyJavaScript.js' file is located inside the project folder)
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";
}
var slideIndex1 = 0;
showSlides1();
function showSlides1()
{
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
slideIndex1++;
if(slideIndex1 > slides.length)
{
slideIndex1 = 1;
}
for(i=0; i<dots.length; i++)
{
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
setTimeout(showSlides1, 2000); // Change image every 2 seconds
}
-------------------------------------
Image Folder(Images):
A folder named 'Images' with sevreal pictures located inside the project folder.
----------------------------------- OR -----------------------------------
----------------------------------- OR -----------------------------------
METHOD 3: 
0 Comments