Wednesday, January 13, 2021

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript


Hello everyone! In this video, you are going to learn how to design an Image Slider(slideshow/carousel) with Both Auto-play and Manual Navigation using CSS, HTML, and Javascript. Manual navigation is with buttons and you can navigate to any slide using these buttons. Autoplay navigation is automatically changing slides due to a timer set by using javascript. Let's see how to design this awesome image slider.

First, create the index.html file and the style.css file. After you created these two files, Start the HTML part of the image slider in the index.html file as you can see in the video. After the HTML part of the image slider is complete, then link the style.css file to the index.html file between the <head></head> tags. Then complete the styling part of the image slider as you can see in the video. After you complete the styling part of the image slider then go back to the index.htm file to code the javascript part of the image slider slide transition. In the index.html file before the body tag close open the <script></script> tags and complete the javascript part of the image slider slide transition interval function in between that tags. So that's hope this video will be helpful to design an attractive image slider using CSS, HTML, and Javascript.

All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.

Source Codes



Download Source Files

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

  1. My image size is 1200 by 600, what do I change to adjust for that. I tried changing the height and width variables, but its not working out properly? please help

    1. Change the width and height everywhere to your image sizes in the style.css file.

  2. i did that and now I get two sets of manual button. Can i post or email you the code for your review?

  3. Radio buttons are not completely displaying.. Can anybody help?

  4. Amazing and beatiful work and website too, you are doing a very outstanding job

  5. How can I add more images? I modified evberything including classes but still won't scroll more than 4

  6. How to reduce timer for eachh slide

  7. I cant write a text under the image slider

  8. I don't know! This Html Code Where to add? Add 2 type code? Can you tell me how to do this? ( blogger )

  9. bro fr no cap no bs ur my hero for creating this slide bro

  10. How to add more than six photos and of different size?

  11. Hi,I have a simpy question: i tried to load pictures from my laptop,why it shows nothing ?


Whatsapp Button works on Mobile Device only