How To Create Image Slider Using HTML 5 & JavaScript
August 3, 2019
43 Comments
Hey Everyone,
New Tutorial for web-designers to make a Image slideshow using Simple JavaScript & HTML. Fully controllable & Automatic Image changing. Simple to code and Play with it Hope you guys might enjoy it.
(Optional If you Guys Like it)
If You like Make Sure to subscribe and Give us your views in the comment.
——————————————Special Codes———————————
you can paste this in your CSS and make sure your class or id…
I made a mistake of putting the javascript code inside the style and couldn't figure out why the slides aren't coming up. DOnt make the same mistake!
THANK YOU VERY MUCH! Thumbs up!
thanks for help…….
It doesnt work for me
Im using notepad ++
hello, and thanks for this lil gem of information, I seem to have it working well, I just have one question, "what if, during the slideshow you have a selection of images (portrait & landscape) but unfortunately the container, cannot recognise these as different image sizes…" anyone familiar with a code to get around this…. or issit a case to create a <div></> for each image, then insert into container, with javascript.??
how to pause slider on mouse hover???
You told me great things
image cant move next and privious
Thnx buddy. subscribed u.very useful. i desparetely wanted that hyper link thing which i found in comment section. add it to the description.
its bad practice to use events inside html
how to slide left to right??
It works!! Thank you very much for your best tutorial.
How to make a responsive slider?
When I give width % and height auto, The next content goes behind the image. Do you have any idea?
thank you for show us how to create a image slideshow, unfortunaty, let say, you have 3 picture included in slideshow. First of all, first picture displayed, then follow by click to display second picture, and then click again to display third picture. at third picture, i clicked prev to display second picture, and then i clicked prev again, it supposed first picture to be display, but it gonna display third picture again =)
so, what is tat solution to fix that, thank you so =)
1pic 2pic 3pic 2pic 3pic
Thanks that is a nice walk through that slider construct. Very helpful.
best vid about how to make image slider but can u help me y we put " slide(x) " and why we dont put x in " slideA() " and can u plz tell me how to do tansition like how to move the pic slowly. plz reply
THANKS A LOT BRO…GOD BLESS YOU
YOU HELPED ME THROUGH MY FINALS!!!!!!!!!!!!!!
very poorly explained…
Anyone know how to stop slider on mouseover and automatically start after mouseout ?
That's the nicest video!! you just rocked buddy!!!!!!
very great tutorial you might want to make your code a little bit more clean
i understood what you said, think its right, but dont work for me.
good tutorial for us.
techno.tut Thank you for your amazing tutorial sir.
but i have problem that is where can manage images into other images i couldn't understand. thnxs alot
I dont cant understand , what is x for ? please answer me xD!
I liked it…u did explain very well
hi techno.tut, when i open or view my slider ,i can see movement in the background but i dont see my images sliding…please help me
The instructions aren't clear enough and jump around a bit too much…gave up at the right/left holder thing…
i made it on notpad and the image is not sliding please help me
Can you do this with flexbox too?
Can you add video to this slider too?
Bad bad code…
@techno.tut techno.tut I am trying to have all this work in ruby on rails. everything you explained here i followed them one by one and they worked. However, I can not have click bottons to work or images slides one to another. I am stuck before 18th mins. My code is below. Help is appreciated!!
HTML and JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/welcome.css">
<script type="text/javascript">
var imagecount = 1;
var total = 3;
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
Image.src = "Images/slider1" + imagecount +".jpg";
}
</script>
</head>
<body>
<div id="container">
<%= image_tag("logos/slider1.jpg", width: '650px', height: '450px', id: "img") %>
<%= image_tag("logos/slider1.jpg", width: '650px', height: '450px', id: "img")%>
<%= image_tag("logos/slider1.jpg", width: '650px', height: '450px', id: "img") %>
<div id="left_holder"><%= image_tag"logos/arrow_left.jpg", class: "left", onClick: "slide(-1)" %></div>
<div id="right_holder"><%= image_tag"logos/arrow_right.jpg", class: "right", onClick: "slide(1)" %></div>
</div>
</body>
</html>
CSS
#container{
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
border: 3px dashed yellow;
overflow: hidden;
}
#img {
height: 450px;
width: 650px;
position: absolute;
}
#left_holder{
height: 450px;
width: 100px;
position: absolute;
left:0px;
top:0px;
cursor: pointer;
}
#right_holder{
height: 450px;
width: 100px;
position: absolute;
right:0px;
top:0px;
cursor: pointer;
}
.left{
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
simple looping code
<script type="text/javascript">
var c = 0;
var t = 4;
function slide(x){
c =(c + x)%t;
if(c<0){
c=t+c;
}
document.getElementById('img').src="image/img0"+c+".jpg";
}
</script>
hi when i click on left or right arrow its no showing other pics just showing icon of broken image link but my first image is showing please check the code if is there any thing wrong please let me know thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Slider</title>
<style type="text/css" >
#container{
width:621px;
height:241px;
position:relative;
margin:20px auto;
}
#img {
width:621px;
height:241px;
position:absolute;
}
#left_holder {
position:absolute;
top:0px;
left:0px;
height:241px;
width:50px;
}
#right_holder {
position:absolute;
top:0px;
right:0px;
height:241px;
width:50px;
}
.left {
width:50px;
height:auto;
top:40%;
left:0px;
position:absolute;
}
.right {
width:50px;
height:auto;
top:40%;
right:0px;
position:absolute;
}
</style>
<script type="text/javascript">
var imagecount = 1;
var total = 5;
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if(imagecount > total){
imagecount=1;
}
else if(imagecount < 1){
imagecount = total;
}
Image.src = "img/img" + imagecount + ".jpg";
}
</script>
</head>
<body>
<div id="container">
<img id="img" src="img/img.jpg"/>
<div id="left_holder"><img onClick="slide(-1)" class="left" src="img/arrow-left.png" alt="Left Holder"/></div>
<div id="right_holder"><img onClick="slide(1)" class="right" src="img/arrow-right.png" alt="Right Holder"/></div>
</div>
</body>
</html>
I'm waiting your response as soon as possible
Thanks
thanks
sahi hai bc..
Thank you so much…how to add the animation for this one?
How to make the images slide after one another instead of just swapping?
not working
<html>
<head>
<title> </title>
<style type = "text/css">
#container {
height : 450px;
width:650px;
margin:20px auto;
position: relative;
}
#img {
height:450px;
width:650px;
position:absolute;
}
#left_holder{
height:450px;
width:650px;
position:absolute;
left:0px;
top:0px;
}
#right_holder{
height:450px;
width:650px;
position:absolute;
right:0px;
top:0px;
}
.left {
height:50px;
width:50px;
position:absolute;
top:50%;
left:0px;
}
.right {
height:50px;
width:50px;
position:absolute;
top:50%;
right:0px;
}
</style>
<script type ="text/javascript">
var imagecount = 1;
var total = 6;
function slide(x)
{
var Image = document.getElementsById('img');
imagecount = imagecount + x;
Image.src = "Images/img" +imagecount +".jpg";
}
</script>
</head>
</body>
<div id="container">
<img src = "Images/img1.jpg" id ="img"/>
<div id = "left_holder"><img onClick="slide(-1)" class="left" src ="Images/arrowleft.png"/> </div>
<div id = "right_holder"> <img onClick="slide(1)"class="right" src ="Images/rightarrow.png"/></div>
</div>
</body>
</html>
How to increase the width of the slider ???
hello! why is it that my left icon on the slider doesn't work when i click on it?
thank you man! keep on making tutorials it helps a lot. Godbless.
I have followed this tutorial to the letter, but my left and right buttons will not work. Any thoughts?