Responsive Image Slider With Auto-sliding And Full Controls | HTML,CSS & Pure JavaScript

Подписаться 1,7 тыс.

Просмотров 25 тыс.

50% 1

In this tutorial, we are going to create an awesome carousel (image slider / image slideshow), using html, css and vanilla javascript.
The slider will have auto-sliding feature, side navigation buttons, and clickable indicators.
Creating a carousel (slideshow) is very simple and i have tried my best to make the code more simple and understandable.
I hope this tutorial will help you.
IF YOU ARE NEW TO THIS RU-vid CHANNEL, PLEASE SUBSCRIBE IT FOR MORE VIDEOS.
*** Watch Multiple Images Slider Tutorial ***
• Images Slider Using HT...
Related Keywords:
Responsive Image Slider
Image Slideshow
carousel
auto slider
auto slide show
vanilla javascript
** Download Source Code: **
drive.google.com/file/d/1ouhL...
#FiveStarTutorials
#carousel
#slider

Опубликовано:

6 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@jimtacujan3272 14 дней назад

thanks for the tutorial, but there is an white screen after each end of the slider, the if-else statement is actually way too late recalled the value of counter(variable) and the animation would be called even if the variable has already been incremented nor decremented. please put an additional IF after the immediate ++, and before the immediate --(minus).

@five-startutorials7530 9 дней назад

I haven't noticed it, I will see Thank you

@rhymekidstv Год назад

Wow! The best so far on youtube. Straightforward and informative. Thank you. Subscribed 👍

@five-startutorials7530 11 месяцев назад

Glad it was helpful!

@discreet4551 Год назад

Your code for carousel is the simplest I've seen. Thank you.

@nasibekhlas2494 Год назад

Agree🙂

@five-startutorials7530 Год назад

thanks there are many ways, but i try the simplest

@amigautier 4 месяца назад

Wow! The best tutorial. Thank you so much.

@five-startutorials7530 4 месяца назад

You are most welcome

@khansawidhani9899 8 месяцев назад

this is what I was really needed. Thanks 👍

@five-startutorials7530 8 месяцев назад

Glad it helped you!

@mhhamzaedits 6 месяцев назад

your tutorial is not a five star. This is a Seven Star.🌟 Thank You Bro.

@five-startutorials7530 6 месяцев назад

So nice of you Most welcome bro

@knowmore7852 Год назад

keep uploading this types of project ....

@five-startutorials7530 11 месяцев назад

thank you i will

@codewithdahir 19 дней назад

hands down bro, I am so grateful how you presenting us your pure knowledge about programming in js

@five-startutorials7530 16 дней назад

Thanks a lot I am happy you like it

@codewithdahir 16 дней назад

@@five-startutorials7530 subed keep going✌

@khansawidhani9899 8 месяцев назад

Subscribed!!! ❤

@ItzsufeeCodex-nb8ug 5 месяцев назад

What a good tutorial tnx

@five-startutorials7530 5 месяцев назад

You are welcome

@sayidsayid8488 4 месяца назад

many many thanks for the source file

@five-startutorials7530 4 месяца назад

You are most welcome

@mcroman-superfeat 6 месяцев назад

Also very LOGISTIC to put in photo links... NO mess here 4 SURE ! ::: ;) Clean HTML and .css and .js Design ...

@five-startutorials7530 6 месяцев назад

I am glad you liked it Thank you bro

@NedumEze Год назад

Great Bro. Shame, you didn't make this code available for download. Please reconsider.

@AfriEye Год назад

Thanks bro. But, can you pls show how to duplicate and place slider side by side

@five-startutorials7530 Год назад

did you mean to show two or three slides at a time?

@YogaPanggabean-xf8ct Год назад

@@five-startutorials7530 yeah bro can you do that

@pivardonesta4678 4 месяца назад

It's a bit hard for me when I try to found my issue, they are many img on my file so that makes the query select image gone wrong, but I fixed it. However I've been success. Thanks a lot

@five-startutorials7530 4 месяца назад

I am glad it helped you

@user-jb6ux6nj9l 10 месяцев назад

Hello brother, I did everything and everything works great, thank you, but there is a problem that when I get to the last picture, it does not return to the first picture, the background appears empty, and after 6 seconds the first background appears, what should I do please

@five-startutorials7530 10 месяцев назад

I uploaded the source code bro, now you can download the source code from the video description.

@heckencubana8357 27 дней назад

please help! first of all, thank you very much for the video and even the download of the file. that is almost exactly what I have been looking for for a long time. However, I have a small problem: it is only partially "responsive". if the page is made smaller, it reduces the "width", but unfortunately not the "height" as a percentage. This makes the image narrower in the view and you only see part of the image. how can I change the file in the CSS part so that the whole image is reduced proportionally in "width and height" at the same time? thank you very much for your help. greetings Matthias

@five-startutorials7530 26 дней назад

I am glad it helped you. To adjust the width and height, there are many ways through which you can do it, but I prefer to use 'media query': At the bottom of the CSS code, write: @media(max-width: 600px){ .slide-container{ width: 500px; height: 300px; } } /* Note: you can vary the width of the media queries and use different width and height for the slide-container according to your need. Also add padding to the left and right of the body element to look better: Exp: body{ padding: 0px 8%; } I HOPE THIS SOLUTION WILL HELP YOU!

@cgianimationtv1828 Год назад

Can you code Prev and Next for post layout, not numeric pagination

@five-startutorials7530 Год назад

i will try

@cgianimationtv1828 Год назад

@@five-startutorials7530 Pls do am waiting

@myty5563 2 месяца назад

doesnt work, i need it for images of products but the images doesnt seem to change :/

@five-startutorials7530 2 месяца назад

I don't know what problem you are facing, check the format of your images. Also I have given you the source code in the video description, you can download it. For your product images you may need a multiple images slider, and I am going to upload a new video tutorial soon, may be tomorrow. I hope it will help you, so stay tuned.