Responsive Image Slider With Auto-sliding And Full Controls | HTML,CSS & Pure JavaScript
ฝัง
- เผยแพร่เมื่อ 6 ต.ค. 2022
- 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 TH-cam 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
this video just wow.....
The best step by step explanation and tq bro
@@msrinu1579 Thank you bro
I'm glad it helped you
Wow! The best so far on youtube. Straightforward and informative. Thank you. Subscribed 👍
Glad it was helpful!
your tutorial is not a five star.
This is a Seven Star.🌟
Thank You Bro.
So nice of you
Most welcome bro
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).
I haven't noticed it, I will see
Thank you
Your code for carousel is the simplest I've seen. Thank you.
Agree🙂
thanks
there are many ways, but i try the simplest
this is what I was really needed. Thanks 👍
Glad it helped you!
Wow! The best tutorial. Thank you so much.
You are most welcome
hands down bro, I am so grateful how you presenting us your pure knowledge about programming in js
Thanks a lot
I am happy you like it
@@five-startutorials7530 subed keep going✌
Subscribed!!! ❤
keep uploading this types of project ....
thank you
i will
Also very LOGISTIC to put in photo links... NO mess here 4 SURE ! ::: ;) Clean HTML and .css and .js Design ...
I am glad you liked it
Thank you bro
What a good tutorial tnx
You are welcome
many many thanks for the source file
You are most welcome
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
I am glad it helped you
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
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!
Thanks bro. But, can you pls show how to duplicate and place slider side by side
did you mean to show two or three slides at a time?
@@five-startutorials7530 yeah bro can you do that
Great Bro.
Shame, you didn't make this code available for download. Please reconsider.
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
I uploaded the source code bro, now you can download the source code from the video description.
doesnt work, i need it for images of products but the images doesnt seem to change
:/
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.
can you give me file this is project
Can you code Prev and Next for post layout, not numeric pagination
i will try
@@five-startutorials7530 Pls do am waiting
bhai my javascipt was not workon prev help me
You have the source code in the description bro
💩 *_valoo ... uku ... may deham poray ..._* ☠
It is not responsive.
🥲
it is responsive
can you give me file this is project