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

Подписаться 50 тыс.

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

50% 1

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
🔎 More new image slider tutorials available on the channel. Visit the channel for more intersting image slider tutorials and other projects.
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.

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

19 май 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@aaful Год назад

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

@MariusGrecu 3 месяца назад

IT WORKED! God bless you! All of you here!

@RebooT_Channel 2 года назад

Спасибо большое за видео!!!! Даже без слов все понятно, отлично показываете параллельно на примере!

@leonelcenteno3816 Год назад

This shows that programing is a real language... thank you

@madmac66 Год назад

Twenty of the best and most useful minutes I have spent on RU-vid. Thanks. Perfect tutorial. No messing. No fluff. Right to the point. You are a legend

@artwitha.g.8955 2 года назад

wow this video was a blessing tysm !! it was clear and to the point even for someone with very little experience with JS!

@rajatchaurasia3578 3 года назад

Its humble person that's provide source code free😍😍😍 thank-you so much bro

@houiderwalid5842 3 года назад

waw, it's not that complicated, i've been struggling with it the whole day. thank you so much

@charne94 3 года назад

In my heart I smashed that like button a million times, but on RU-vid I was only able to do it once. Great video!

@CodingSnow 3 года назад

Wow, Thank you very much!

@chaitanyalathabaddam7450 2 года назад

Pl check once if we will go to the other slide

@ephraimmusa770 2 года назад

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.

@jayceonsantana1405 2 года назад

@Ephraim Musa Instablaster :)

@ephraimmusa770 2 года назад

@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.

@afoxwithahat7846 2 года назад

This was the only one that gave me no error at all, and has automation too, God bless you bro

@zzzblebeb Год назад

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?

@afoxwithahat7846 Год назад

@@zzzblebeb Sorry bro I abandoned the project, but I had done a JavaScript one before this one, so there's that.

@michaelraymondlegg210 Год назад

@@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

@stephenmuchara6696 3 года назад

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👊🏾👊🏾

@CodingSnow 3 года назад

Glad it helped! You're very welcome!

@rtd4413 2 года назад

What if i have a header how doni let it not affect Header

@realmsmcpe5086 2 года назад

Thanks "coding snow" works 100%, *I ask permission to fetch the code and display the result on my website* , thank you very much.

@jesuspadron726 Год назад

te has ganado un nuevo seguidor , esta increíble el slider me salvaste la vida jajajaja😅

@nikomitk8091 11 месяцев назад

Omg you are my saviour. This is really awesome, worked very well and is easy to customize.

@jpgaming7854 Год назад

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!

@pa5n Год назад

do you mean var counter = 2; ?

@jpgaming7854 Год назад

@@pa5n Yes indeed.

@matchmasterstips 10 месяцев назад

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

@Big_Dot_Inc 9 месяцев назад

@@matchmasterstips As you can see in html he has 4images right ,so add 6more and on CSS continue style it 5678910 .it is easy .

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

Very good suggestion it improves my work thank you❤

@ClavinXD Год назад

First video that everything works for me, and it's also beautiful.

@Alex_Murimi 2 года назад

I appreciate and love your work. You are great coding show

@eduardohenriquedeassis9729 2 года назад

Hey, this is superb! Thank you so much for sharing this. Warm greetings from Brasil.

@funstudying 2 года назад

This is an amazing video. Thank you very much for your work~

@yahyajg6807 2 года назад

Deffinitely an amazing tutorial love it 💖

@musshare Год назад

the best quiet explanation of a video i have seen✌

@prabuddh_mathur 2 года назад

Imma add this to my project! Thanks a lot, man! I searched a lot for this.

@CodingSnow 2 года назад

You're most welcome!

@prabuddh_mathur 2 года назад

@@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!

@ankitnainwal9714 Год назад

best video on How to create Image Sliders . 👏👏👏👏

@stasholmansky6579 Год назад

Thanks for this video. It's work))) I do this slider for mobile phone. .slider and .slides add {position: relative;}, then we can add .navigation-auto and .navigation-manual new attribute {bottom: 1em;}. That's good for mobile.

@lancetruong3075 3 года назад

Thank you for this tutorial and thank you for putting in the comments, which really helps.

@CodingSnow 3 года назад

You're welcome! ❤️

@cleitonisaias 2 года назад

Muito bom. Parabéns.

@andreamazza6758 2 года назад

Thank you bro! Your code is absolutely clear

@marianorojo_ 2 года назад

Wooow The best tutorial for this topic

@SatPracticeDaily 2 года назад

TYSM i get to understand a lot of thing and this really helps my homework.

@juliandeligt3603 2 года назад

You‘re a hero! Thank you so much!

@angarconsultoriadigital1657 2 года назад

Exactly what I was looking for !

@christinearendain 2 года назад

Thank you for this. Amazing tutorial

@naimshareq1532 3 года назад

Simple yet absolutely amazing! ❤️

@CodingSnow 3 года назад

Thank you! ❤️

@michaelraymondlegg210 Год назад

@@CodingSnow afternoon i havent clue why mine isnt working could you help>?

@TheBoysMemes123 Год назад

@@CodingSnow please add voice with video

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

This video is so good! tank for Help us Angola!

@xinyichen1418 Год назад

This is so helpful. Thank you so much.

@facundoizaza6752 2 года назад

Muchas gracias amigo, funciona de 10. Still working 26/6/2021, thank u bro

@CodingSnow 2 года назад

You're most welcome!

@kieran2347 3 года назад

Loved the video thank you, you website is also awesome, liked, subbed and even subbed to newsletter. I love it!

@CodingSnow 3 года назад

Thank you very much and most welcome! ❤️

@petermwansa4890 Год назад

Thank you very much for the video!!! It has really helped me a lot

@mike_2.8 2 года назад

Great work, thank you very much!!

@bqh8974 2 года назад

Great video. Thanks for sharing your knowledge.

@lynco02 Год назад

Finally a tutorial that works without JavaScript ! Tanks

@ems-electronicmusicsounds39 Год назад

He used JavaScript in last bro🙂

@cam9751 3 года назад

Thank you, this video helped me a lot ! Your explanations are very good and understandable for a beginner.

@CodingSnow 3 года назад

Glad it was helpful!

@sylakkayizzi8513 2 года назад

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

@12viiiaethandsouza36 3 года назад

When opened your your site i there also found these sliders and much more

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

thank you very much! you´ve really helped me. next time it would be perfect if you put the code in the description or make a comment so that i could copy paste it. thank you for your explaination!

@edgartrejos7226 Год назад

Amazing! Thank you very much!

@jackconnor526 Месяц назад

it was posted a long time ago but it was useful to me👌👌

@vuongvu8100 2 года назад

Thank you so much! It helped me a lot.

@user-ug1vi3bv1f 2 года назад

Great work! Thanks! I did it on the third attempt.😅

@davebalino Год назад

Thanks! Amazing tutorial.

@joaojordao932 Год назад

Thank you very much you saved my bimester.

@KaridaMarshall01 10 месяцев назад

Great video! Thank you so much! i learned a lot!

@zohirboudiba7031 Год назад

Thanks ! It 's very interesting video.. I never find an interested vedeo like this. Thanks

@waltersantosdeandradesouza1484 2 года назад

Thanks you so much this tutorial was so helpful.

@sitdavanliangthong8242 Год назад

Thank you for the tip. Love this video.

@mayankgurung5902 3 года назад

Thank u so much for your tutorial exactly what i nedded

@CodingSnow 3 года назад

Glad it was helped!

@Bobbythatisready 3 года назад

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?

@CodingSnow 3 года назад

Excellent! Yes, to separately show the manual and auto buttons navigation visibility.

@ashimshrestha4004 3 года назад

The best tutorial ever!! Thanks

@CodingSnow 3 года назад

Glad to hear that! 😊

@dianabagrin2147 Год назад

Thanks! It is a great lesson.

@bayzidhossain7959 2 года назад

wonderful video. Thank you so much

@miyanhassanaraien5607 2 года назад

loved this tutorial

@TheLucidway 2 года назад

I learned a lot from this tut. Thank you.

@CodingSnow 2 года назад

You're most welcome! ❤️

@MinecraftAchievers Год назад

Now thats what I call a slideshow thank you so much this was soooooo helpful and I also Subscribed😄😄😄

@CodingSnow Год назад

You're most welcome! ❤️

@mariasolgiuria8767 9 месяцев назад

Could you explain me why using the label elements instead of directly using the input? Thanks! Watching ur video from Argentina! @@CodingSnow

@prophetnozza4150 2 года назад

Thanks! Brilliant!

@samikoy9812 3 года назад

I love your videos so much, it can help my website!

@CodingSnow 3 года назад

Glad to hear that!

@codingtilldie 3 года назад

Makasih om,salam dari Indonesian

@NaTHGamin 3 года назад

Thanks it worked!

@muhammadtaha2483 2 года назад

Thank you so much bro ❤️ for this video it helped me a lot

@mellonback Год назад

thanks for the video!!!

@lmfrosee1253 Год назад

Thanks man really helped

@chazi1149 2 года назад

Thanks you so much for your help

@lauramahieu3799 3 года назад

Brilliant !!!! Thank you so much !!

@CodingSnow 3 года назад

You're welcome!

@devsonwani4160 Год назад

thanks a lot, such a great video!!! 😍😍😍

@sudhirnishad3728 3 месяца назад

thanks so much sir ❤❤

@gencbeka331 2 года назад

Thanks for this awesome tutorial, it helps me a lot.👍👨‍💻🙂😉 Greetings from Germany 🇩🇪

@CodingSnow 2 года назад

You're most welcome! 😉😁

@bojacksworldwideweb 7 месяцев назад

I love your music, you have a really good taste for, songs, also I finally learned how to make a image slider. just 1question, how do I stop it from moving automatically?(so I can move it manually?)