Coding Fun Html How To Create Image Slider Using HTML 5 & JavaScript

How To Create Image Slider Using HTML 5 & JavaScript





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…

Tags: , , , , , , , , , , , , , , , ,

43 thoughts on “How To Create Image Slider Using HTML 5 & JavaScript”

  1. 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!

  2. THANK YOU VERY MUCH! Thumbs up!

  3. thanks for help…….

  4. Crysthilfm says:

    It doesnt work for me
    Im using notepad ++

  5. jhoan rocher says:

    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.??

  6. Ravi Chawra says:

    how to pause slider on mouse hover???

  7. You told me great things

  8. iman fatima says:

    image cant move next and privious

  9. Sooraj JP says:

    Thnx buddy. subscribed u.very useful. i desparetely wanted that hyper link thing which i found in comment section. add it to the description.

  10. Ksee says:

    its bad practice to use events inside html

  11. how to slide left to right??

  12. Jeeva Siva says:

    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?

  13. Jay Chew says:

    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

  14. Carl Morris says:

    Thanks that is a nice walk through that slider construct.  Very helpful.

  15. 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

  16. THANKS A LOT BRO…GOD BLESS YOU
    YOU HELPED ME THROUGH MY FINALS!!!!!!!!!!!!!!

  17. Hauberk says:

    very poorly explained…

  18. Anyone know how to stop slider on mouseover and automatically start after mouseout ?

  19. That's the nicest video!! you just rocked buddy!!!!!!

  20. very great tutorial you might want to make your code a little bit more clean

  21. Bloody L. says:

    i understood what you said, think its right, but dont work for me.

  22. Nor Mohamed says:

    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

  23. I dont cant understand , what is x for ? please answer me xD!

  24. Jeffin Sam says:

    I liked it…u did explain very well

  25. Benny One says:

    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

  26. The instructions aren't clear enough and jump around a bit too much…gave up at the right/left holder thing…

  27. i made it on notpad and the image is not sliding please help me

  28. Craig Walkup says:

    Can you do this with flexbox too?

  29. Can you add video to this slider too?

  30. Oruj Gadimov says:

    @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;

    }

  31. 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>

  32. 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

  33. Debug Nata says:

    Thank you so much…how to add the animation for this one?

  34. How to make the images slide after one another instead of just swapping?

  35. 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>

  36. Danny Gates says:

    How to increase the width of the slider ???

  37. DANCE FLICKS says:

    hello! why is it that my left icon on the slider doesn't work when i click on it?

  38. thank you man! keep on making tutorials it helps a lot. Godbless.

  39. I have followed this tutorial to the letter, but my left and right buttons will not work. Any thoughts?

Leave a Reply

Your email address will not be published. Required fields are marked *