Wednesday, January 13, 2021

Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript



Description


Hello everyone! In this video, you are going to learn how to design a Responsive Image Slider(Slideshow / Carousel) with Manual Navigation Buttons and Auto-Play Navigation functionalities only using pure javascript. In this Image Slider, you can add more images you want without changing any CSS styles because manual image transitions and auto-play image transitions working with vanilla javascript. This image slider is fully responsive and perfectly fine for any device screen. And there is a text title and a text paragraph description on each image on the slider.


First, create the index.html file and the style.css file. After you created these two files, Add the responsive meta tag and link the style.css file in between <head></head> tags to the index.html file. Then start the HTML part of the responsive 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 go to the style.css file and do the styling part of the product card as you can see in the video. After the styling part with the responsive styling part of the image slider is complete, then go to the index.html file to start the javascript part of the image slider manual and auto transitions. In the index.html file before the body close tag open <script></script> tags and then complete the javascript part of the image slider to transition images when clicking navigation buttons and auto transition on a time out as you can see in the video. Here we are using CSS clip-path property to the slide transition. So that's all, Hope this video will be helpful to design an awesome responsive image slider using HTML, CSS, and Vanilla 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. Thank you! do you have the images?

    ReplyDelete
    Replies
    1. You're most welcome! Images are included with source files.

      Delete
  2. How do i increase the sliding speed

    ReplyDelete
    Replies
    1. Decrease the number of milliseconds in setTimeout method (tutorial it is 10000ms).

      Delete
  3. hello, how do i adjust the image width and height? because all of my images were 1920x1080, and it didnt fit.

    ReplyDelete
    Replies
    1. Hello there, change the CSS styles according to the width and the height of your images.

      Delete
  4. Great job, guys. Thanks for sharing your knowledge!

    ReplyDelete
  5. Really nice! Can u explain me what is this in the js "[...active]"? Why "..." ?

    ReplyDelete
  6. Cool!! How Could I position it to the center of my page? Im having some issues with that

    ReplyDelete
  7. iam getting this error can anyone please help on this line let currentSlide = 1;

    ReplyDelete

Whatsapp Button works on Mobile Device only