Qatar
info@sugaiinstitute.com
YouTube : Sugai Institute
Qatarinfo@sugaiinstitute.comYouTube : Sugai Institute
In this video you will learn about how to create slider image using javascript and CSS.
(Use Ctrl+c to copy this coding)
<html>
<head>
<title>
Javascript Tutorial</title>
<style>
.slider
{
display: none;
}
.slideshow
{
position: relative;
}
.prev, .next
{
position: absolute;top: 50%;
cursor: pointer;
padding: 15px;
font-size: 20px;
color: white;
margin-top: -30px;
}
.next
{
right: 0;
}
.prev:hover, .next:hover
{
background-color: black;
}
.dot
{
height: 15px;
width: 15px;
background-color: gray;
display: inline-block;
border-radius: 50%;
}
.active
{
background-color: black;
}
</style>
</head>
<body>
<center>
<h1>
Slider Image using Javascript</h1>
</center>
<div class="slideshow">
<div class="slider">
<img src="1.png" style="width:100%;height: 300px;">
</div>
<div class="slider">
<img src="2.png" style="width:100%;height: 300px;">
</div>
<div class="slider">
<img src="3.png" style="width:100%;height: 300px;">
</div>
<a class="prev" onclick="nextSlide(-1)">
❮</a>
<a class="next" onclick="nextSlide(1)">
❯</a>
</div>
<br>
<div style="text-align:center;">
<span class="dot" onclick="gotoslide(1)">
</span>
<span class="dot" onclick="gotoslide(2)">
</span>
<span class="dot" onclick="gotoslide(3)">
</span>
</div>
<script type="text/javascript">
var slide=1;
show(slide);
function nextSlide(n)
{
show(slide += n);
}
function gotoslide(n)
{
show(slide = n);
}
function show(n)
{
var i;
var slider_img=document.getElementsByClassName("slider");
var dots=document.getElementsByClassName("dot");
for(i = 0; i<slider_img.length ; i++)
{
slider_img[i].style.display="none";
}
for(i=0; i<dots.length;i++)
{
dots[i].className=dots[i].className.replace(" active","");
}
if(n>
slider_img.length)
{
slide=1;
}
if(n<1)
{
slide=slider_img.length;
}
slider_img[slide-1].style.display="block";
dots[slide-1].className +=" active";
}
</script>
</body>
</html>
Click output to view the output of the coding
I am how to front end development learn. I learn you pls said sister .i am in sri lanka
I am how to front end developmer corse doing . I learn you pls .i am sri lanka
