Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript
ฝัง
- เผยแพร่เมื่อ 19 พ.ค. 2020
- In this tutorial, you can 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. Hope this tutorial will be helpful.
+ Like and Subscribe 🔔 for More! ❤
∎ Get All Project Source Codes - / membership
Hire me 🔖
-----------------------
∎ Hire me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Hire me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Download Source Files - codingsnow.com
∎ Download All Source Files On Patreon - / 43063622
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
#css_image_slider #css_slideshow
🎵 Background Music
---------------------------------------
Track: Far Out - Chains (feat. Alina Renae) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Far Out - Chains (feat...
Free Download / Stream: ncs.io/ChainsYO
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Jordan Schor & Harley ...
Free Download / Stream: ncs.io/HomeYO
____________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.
Спасибо большое за видео!!!! Даже без слов все понятно, отлично показываете параллельно на примере!
Wow, this was wonderful. First time I realized how I can truly leverage CSS in animations.
Also the video was enternaining and efficient in terms of length
In my heart I smashed that like button a million times, but on TH-cam I was only able to do it once. Great video!
Wow, Thank you very much!
Pl check once if we will go to the other slide
You probably dont care but does anybody know of a way to log back into an instagram account?
I somehow forgot my login password. I appreciate any tricks you can give me.
@Ephraim Musa Instablaster :)
@Jayceon Santana I really appreciate your reply. I got to the site thru google and Im trying it out atm.
I see it takes a while so I will reply here later when my account password hopefully is recovered.
IT WORKED! God bless you! All of you here!
Very good video, but i would suggest to rewrite counter to: Val counter = 2; , so when you load the page it doesnt take double the time. I would also suggest to add checked by default to radio 1, so like this: , if you type that instead of without checked it will be checked when you first load the page. Anyways great video, learned a lot from it!
do you mean
var counter = 2; ?
@@pa5n Yes indeed.
hey thank you so much .. can u suggest me how i make it for 10 images slides.. i add ten images but there not working and width problem when slides. plz reply
@@matchmasterstips As you can see in html he has 4images right ,so add 6more and on CSS continue style it 5678910 .it is easy .
Very good suggestion it improves my work thank you❤
This shows that programing is a real language... thank you
waw, it's not that complicated, i've been struggling with it the whole day. thank you so much
This was the only one that gave me no error at all, and has automation too, God bless you bro
somehow mine error, have checked it three times still no idea. could you perhaps check on my code and tell me where I screw up?
@@zzzblebeb Sorry bro I abandoned the project, but I had done a JavaScript one before this one, so there's that.
@@zzzblebeb ive got error too man slides when i remove .slide input {display: none} the buttons come up on side and it work but brokenly
Twenty of the best and most useful minutes I have spent on TH-cam. Thanks. Perfect tutorial. No messing. No fluff. Right to the point. You are a legend
wow this video was a blessing tysm !! it was clear and to the point even for someone with very little experience with JS!
Its humble person that's provide source code free😍😍😍 thank-you so much bro
Thanks you so much this tutorial was so helpful, i was able to create totally different layout using 100% width with same concept and it worked👊🏾👊🏾
Glad it helped! You're very welcome!
What if i have a header how doni let it not affect Header
Imma add this to my project! Thanks a lot, man! I searched a lot for this.
You're most welcome!
@@CodingSnow Also, where can I get this video' s code I have going through your website but I couldn't get where is the actual of it is. Please provide a link of this page's URL if possible! Thanks again!
Deffinitely an amazing tutorial love it 💖
I appreciate and love your work. You are great coding show
Thanks for the video! It helped a lot.
I also realized that I can make it work without the 'navigation-auto' class. It worked fine only with the 'navigation-manual' class because we could make the slide images automatically change in the .js file.
Is there any reason you added the 'navigation-auto' class though?
Excellent!
Yes, to separately show the manual and auto buttons navigation visibility.
te has ganado un nuevo seguidor , esta increíble el slider me salvaste la vida jajajaja😅
Exactly what I was looking for !
Thank you for this tutorial and thank you for putting in the comments, which really helps.
You're welcome! ❤️
This is an amazing video. Thank you very much for your work~
You‘re a hero! Thank you so much!
Hey, this is superb!
Thank you so much for sharing this.
Warm greetings from Brasil.
the best quiet explanation of a video i have seen✌
Amazing that was so clear, the only thing I still can't figure out is why you made it 500% not 400% as they are 4 images?
Thanks for your efforts ☺️
I don't know but.. with 6 images, that only work with 500% too... so i don't understand this part :/
thank you soo much , you saved my poor ass ^^
You're most welcome my friend! ❤️
Muito bom. Parabéns.
Loved the video thank you, you website is also awesome, liked, subbed and even subbed to newsletter. I love it!
Thank you very much and most welcome! ❤️
Lesson learned watch TH-cam first before searching at the web hahaha. So much easy than I found on Google.
google codekky blog
Simple yet absolutely amazing! ❤️
Thank you! ❤️
@@CodingSnow afternoon i havent clue why mine isnt working could you help>?
@@CodingSnow please add voice with video
Omg you are my saviour. This is really awesome, worked very well and is easy to customize.
Thanks "coding snow" works 100%, *I ask permission to fetch the code and display the result on my website* , thank you very much.
Thank you bro! Your code is absolutely clear
Wooow The best tutorial for this topic
First video that everything works for me, and it's also beautiful.
Great work, thank you very much!!
This is so helpful. Thank you so much.
Thank you for this. Amazing tutorial
Thank u so much for your tutorial exactly what i nedded
Glad it was helped!
best video on How to create Image Sliders . 👏👏👏👏
TYSM i get to understand a lot of thing and this really helps my homework.
That's so cool!
I learned a lot from this tut. Thank you.
You're most welcome! ❤️
Thank you so much! It helped me a lot.
Amazing! Thank you very much!
The best tutorial ever!! Thanks
Glad to hear that! 😊
Thank you, this video helped me a lot ! Your explanations are very good and understandable for a beginner.
Glad it was helpful!
Finally a tutorial that works without JavaScript ! Tanks
He used JavaScript in last bro🙂
Great work! Thanks! I did it on the third attempt.😅
loved this tutorial
Great video. Thanks for sharing your knowledge.
thanks for the video!!!
When opened your your site i there also found these sliders and much more
Brilliant !!!! Thank you so much !!
You're welcome!
Makasih om,salam dari Indonesian
Thanks! Amazing tutorial.
Thanks you so much this tutorial was so helpful.
Great tutorial, any idea how to make the last slide return from the beginning instead of going all the way through the slides?
Well that's what they did in the video.
When it reaches the last slide it goes to the beginning slide at the next iteration.
In order to make it's way back from the last to the first one by one, we can simply assign a variable such as reverse=true/false; and change it's values accordingly which will do the job.
you're the best man!
Thank you very much for the video!!! It has really helped me a lot
Thank you very much you saved my bimester.
Thank you for the tip. Love this video.
WOW! Thanks a lot!
Love this ^^
Thank you! ❤
Useful video!!
Muchas gracias amigo, funciona de 10. Still working 26/6/2021, thank u bro
You're most welcome!
So cool! Thanks!
Thanks for the tutorial! Extremely helpful. I have a question though, what if you wanted the scroll speed to be defined by the users dragging of a scroll bar on the page? Could you point me in the right direction or provide an example code to make this possible?
did yours work fine?
Great video! Thank you so much! i learned a lot!
I love your videos so much, it can help my website!
Glad to hear that!
Thank you so much!
Thanks you so much for your help
You saved my life, thanks :)
You're welcome! 😊
Thanks! Brilliant!
Thanks! It is a great lesson.
it was posted a long time ago but it was useful to me👌👌
nice bro this was so good
Thanks it worked!
thanks so much this guide was so useful to me, and it did solve my problem that i had, i do real appreciate thanx so much
Thank you Bro I added it to my assignment 🇱🇰😁
Great man! You're most welcome :)
This is so awesome!! thank you
You're so welcome! ❤
Great work👍
Thank you ❤
amazing my man respect, like from me
Thank you very much!
Thankyou you are a life saver
You're most welcome!
wonderful video. Thank you so much
Now thats what I call a slideshow thank you so much this was soooooo helpful and I also Subscribed😄😄😄
You're most welcome! ❤️
Could you explain me why using the label elements instead of directly using the input? Thanks! Watching ur video from Argentina! @@CodingSnow
Thanks ! It 's very interesting video.. I never find an interested vedeo like this. Thanks
Thank you so much bro ❤️ for this video it helped me a lot
thanks so much sir ❤❤
This video is so good! tank for Help us Angola!
ty brooooo 💙
Thanks man really helped
Thanks for this awesome tutorial, it helps me a lot.👍👨💻🙂😉
Greetings from Germany 🇩🇪
You're most welcome! 😉😁
omg amazing i very like it thank you
i am beginner in dev frontend really thank u!
You're most welcome! ❤️
I love the video !
Love the video and I am actually trying to do it myself but idk what I get wrong! When i complete the code if I click for example image 3 the auto navigation does not continue in the fourth picture but it starts where it left off, does anyone know where the problem stands ?! Thanks for the amazing tutorial anyways !
Thank you very much for this video. It could help me greatly.
You're most welcome! Glad it was helpful!
bro u doing great job
nice man very helpful