Wednesday, January 13, 2021

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



Description


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


index.html



style.css



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

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

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

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

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

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

    ReplyDelete
  6. How to reduce timer for eachh slide

    ReplyDelete
  7. I cant write a text under the image slider

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

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

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

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

    ReplyDelete
  12. It works awesome! I'm trying to do the same but animating from the bottom up. But I can't get the animation calculating the same. It moves less than with width. What could that be?

    /Sebastian

    ReplyDelete
  13. So beautiful now I can make one too thanks allot.

    ReplyDelete
  14. Great ! But how can i make the images appear on the full screen? Thanks!

    ReplyDelete

Whatsapp Button works on Mobile Device only