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

Поделиться
HTML-код
  • Опубликовано: 30 дек 2024

Комментарии • 651

  • @charne94
    @charne94 3 года назад +29

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

    • @CodingSnow
      @CodingSnow  3 года назад +2

      Wow, Thank you very much!

    • @chaitanyalathabaddam7450
      @chaitanyalathabaddam7450 3 года назад

      Pl check once if we will go to the other slide

    • @ephraimmusa770
      @ephraimmusa770 3 года назад

      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
      @jayceonsantana1405 3 года назад

      @Ephraim Musa Instablaster :)

    • @ephraimmusa770
      @ephraimmusa770 3 года назад

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

  • @MariusGrecu
    @MariusGrecu 10 месяцев назад +3

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

  • @afoxwithahat7846
    @afoxwithahat7846 2 года назад +22

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

    • @zzzblebeb
      @zzzblebeb 2 года назад

      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
      @afoxwithahat7846 2 года назад

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

    • @michaelraymondlegg210
      @michaelraymondlegg210 2 года назад

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

  • @madmac66
    @madmac66 2 года назад +12

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

  • @aaful
    @aaful 2 года назад +22

    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

  • @leonelcenteno3816
    @leonelcenteno3816 2 года назад +1

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

  • @jpgaming7854
    @jpgaming7854 2 года назад +53

    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
      @pa5n Год назад

      do you mean
      var counter = 2; ?

    • @jpgaming7854
      @jpgaming7854 Год назад +2

      @@pa5n Yes indeed.

    • @matchmasterstips
      @matchmasterstips Год назад +1

      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
      @Big_Dot_Inc Год назад +1

      ​@@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
      @skydoesblue4854 11 месяцев назад

      Very good suggestion it improves my work thank you❤

  • @lynco02
    @lynco02 2 года назад

    Finally a tutorial that works without JavaScript ! Tanks

  •  Год назад +1

    Lesson learned watch RUclips first before searching at the web hahaha. So much easy than I found on Google.

  • @rajatchaurasia3578
    @rajatchaurasia3578 3 года назад +1

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

  • @houiderwalid5842
    @houiderwalid5842 3 года назад +6

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

  • @marianorojo_
    @marianorojo_ 2 года назад +1

    Wooow The best tutorial for this topic

  • @ВпоискахСвоегоМеста

    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.

  • @nikomitk8091
    @nikomitk8091 Год назад

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

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

  • @prabuddh_mathur
    @prabuddh_mathur 3 года назад +2

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

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

      You're most welcome!

    • @prabuddh_mathur
      @prabuddh_mathur 3 года назад +1

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

  • @RebooT_Channel
    @RebooT_Channel 3 года назад +5

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

  • @musshare
    @musshare 2 года назад

    the best quiet explanation of a video i have seen✌

  • @ankitnainwal9714
    @ankitnainwal9714 2 года назад

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

  • @zohirboudiba7031
    @zohirboudiba7031 2 года назад

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

  • @madugulaleelavenkatasaikri5399
    @madugulaleelavenkatasaikri5399 Год назад +1

    good tutorial, but it would be good if there's explanation with voice instead of music....but somehow it helped me..Thanks...

  • @jesuspadron726
    @jesuspadron726 Год назад

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

  • @ClavinXD
    @ClavinXD Год назад

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

  • @joaojordao932
    @joaojordao932 Год назад

    Thank you very much you saved my bimester.

  • @isabelvelasquez6900
    @isabelvelasquez6900 3 года назад +1

    i am beginner in dev frontend really thank u!

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

      You're most welcome! ❤️

  • @AlvanNzere
    @AlvanNzere 5 месяцев назад

    You made me the happiest❤

  • @stephenmuchara6696
    @stephenmuchara6696 3 года назад +13

    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
      @CodingSnow  3 года назад

      Glad it helped! You're very welcome!

    • @rtd4413
      @rtd4413 3 года назад

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

  • @doeeeeeener
    @doeeeeeener Год назад

    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!

  • @Alex_Murimi
    @Alex_Murimi 3 года назад +2

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

  • @artwitha.g.8955
    @artwitha.g.8955 3 года назад +4

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

  • @medblflhn5308
    @medblflhn5308 Год назад +1

    How did you create the effect on the first image showing by youtube?

  • @SatPracticeDaily
    @SatPracticeDaily 3 года назад

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

  • @greatgardna2589
    @greatgardna2589 3 года назад +8

    Great tutorial, any idea how to make the last slide return from the beginning instead of going all the way through the slides?

    • @Kunal-jp8tn
      @Kunal-jp8tn 3 года назад +3

      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.

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

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

  • @budimulyadi8489
    @budimulyadi8489 2 года назад

    Alhamdulillah, thank you so much for your tutorial, masyaallah i can useful this work.

  • @eduardohenriquedeassis9729
    @eduardohenriquedeassis9729 3 года назад +1

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

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

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

  • @fragorhope9724
    @fragorhope9724 4 года назад +1

    A VERY VERY BIG THANK YOU

    • @CodingSnow
      @CodingSnow  4 года назад +2

      You're most welcome! ❤

    • @fragorhope9724
      @fragorhope9724 4 года назад

      @@CodingSnow Bro can you give me tips or teach me personally

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

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

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

      Thank you very much and most welcome! ❤️

  • @DanteSonOfDeath
    @DanteSonOfDeath 2 года назад

    bro u doing great job

  • @JoshuaOkoghie
    @JoshuaOkoghie Год назад

    wow
    I gain alot from this today

  • @grandgrimoirebaal8670
    @grandgrimoirebaal8670 Год назад +1

    Hello there I got something to ask if I wanna let the auto slider start from the radio that I click how should I write it in js?

  • @floded8897
    @floded8897 3 года назад +2

    11:09, my buttons are not working. Like the images are not moving its just stuck there

  • @MinecraftAchievers
    @MinecraftAchievers 2 года назад

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

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

      You're most welcome! ❤️

    • @mariasolgiuria8767
      @mariasolgiuria8767 Год назад

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

  • @josemoraila
    @josemoraila Год назад

    10:31 how do you use .first if the class is named slide first? Beacause it doesn't work on my proyect

  • @Karida_111
    @Karida_111 Год назад

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

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

    Thank you bro! Your code is absolutely clear

  • @petermwansa4890
    @petermwansa4890 Год назад

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

  • @gencbeka331
    @gencbeka331 3 года назад

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

    • @CodingSnow
      @CodingSnow  3 года назад +1

      You're most welcome! 😉😁

  • @sylakkayizzi8513
    @sylakkayizzi8513 3 года назад

    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

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

    The best tutorial ever!! Thanks

  • @danielglover5911
    @danielglover5911 2 года назад

    you're the best man!

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

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

  • @devsonwani4160
    @devsonwani4160 Год назад

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

  • @bojacksworldwideweb
    @bojacksworldwideweb Год назад

    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?)

  • @vishwanavod276
    @vishwanavod276 3 года назад

    Thank you Bro I added it to my assignment 🇱🇰😁

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

      Great man! You're most welcome :)

  • @ChetanTechnical
    @ChetanTechnical 3 года назад +1

    My manual button and automatic button sepretly shows. How to match & hide

  • @Bobbythatisready
    @Bobbythatisready 4 года назад +20

    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
      @CodingSnow  4 года назад +6

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

  • @sitdavanliangthong8242
    @sitdavanliangthong8242 2 года назад

    Thank you for the tip. Love this video.

  • @tranthanhhung961
    @tranthanhhung961 3 года назад

    Kiến thức này đã được hấp thụ. Xin đa tạ!!!

  • @yahyajg6807
    @yahyajg6807 2 года назад +1

    Deffinitely an amazing tutorial love it 💖

  • @ТимурТокумов-и1к
    @ТимурТокумов-и1к 3 года назад

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

  • @davebalino
    @davebalino 2 года назад

    Thanks! Amazing tutorial.

  • @nguyenhuuhoang8131
    @nguyenhuuhoang8131 Год назад

    nice tutorial, i have subscribed

  • @lmfrosee1253
    @lmfrosee1253 2 года назад

    Thanks man really helped

  • @lancetruong3075
    @lancetruong3075 4 года назад +1

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

  • @chazi1149
    @chazi1149 2 года назад +1

    Thanks you so much for your help

  • @waltersantosdeandradesouza1484
    @waltersantosdeandradesouza1484 3 года назад

    Thanks you so much this tutorial was so helpful.

  • @edgartrejos7226
    @edgartrejos7226 Год назад

    Amazing! Thank you very much!

  • @angarconsultoriadigital1657
    @angarconsultoriadigital1657 3 года назад

    Exactly what I was looking for !

  • @imandreipanait
    @imandreipanait 4 года назад +13

    thank you soo much , you saved my poor ass ^^

    • @CodingSnow
      @CodingSnow  4 года назад +1

      You're most welcome my friend! ❤️

  • @vuongvu8100
    @vuongvu8100 3 года назад

    Thank you so much! It helped me a lot.

  • @csgo-highlights6337
    @csgo-highlights6337 2 года назад

    nice bro this was so good

  • @dianabagrin2147
    @dianabagrin2147 Год назад

    Thanks! It is a great lesson.

  • @funstudying
    @funstudying 3 года назад +1

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

  • @cam9751
    @cam9751 3 года назад +4

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

  • @bqh8974
    @bqh8974 3 года назад

    Great video. Thanks for sharing your knowledge.

  • @mayankgurung5902
    @mayankgurung5902 4 года назад +1

    Thank u so much for your tutorial exactly what i nedded

  • @samikoy9812
    @samikoy9812 4 года назад

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

  • @Paulo280713
    @Paulo280713 2 года назад

    excelent video, helped me a lot

  • @HologramJay
    @HologramJay 3 года назад

    I learned a lot from this tut. Thank you.

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

      You're most welcome! ❤️

  • @Mai-karunga-business
    @Mai-karunga-business 2 года назад

    Thank you so much ❤️❤️❤️😘

  • @christinearendain
    @christinearendain 3 года назад

    Thank you for this. Amazing tutorial

  • @omjanmeshrout3381
    @omjanmeshrout3381 Год назад

    Thanks a lot. But just a querry what to fo if i want to add text to each of the slides?

  • @calvinlee4346
    @calvinlee4346 4 года назад +1

    around 7:20 of the video, i am running into the problem where my images would disappear when entering the .slide and .slide img css tag, would you have any thought to why that would be happening?

  • @juliandeligt3603
    @juliandeligt3603 3 года назад

    You‘re a hero! Thank you so much!

  • @michaelraymondlegg210
    @michaelraymondlegg210 2 года назад

    when i remove display for .slides input its slides to one image but other than that it wont work and the radio buttons not working either

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

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

  • @naimshareq1532
    @naimshareq1532 3 года назад +20

    Simple yet absolutely amazing! ❤️

    • @CodingSnow
      @CodingSnow  3 года назад +2

      Thank you! ❤️

    • @michaelraymondlegg210
      @michaelraymondlegg210 2 года назад

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

    • @TheBoysMemes123
      @TheBoysMemes123 2 года назад

      @@CodingSnow please add voice with video

  • @jackblacks4176
    @jackblacks4176 Год назад

    Nice Tut i wanted to ask of the images would automatically fit into the box or we have to size them

  • @mohammedabdel-baki7253
    @mohammedabdel-baki7253 3 года назад +3

    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 ☺️

    • @nathandouillet7106
      @nathandouillet7106 3 года назад

      I don't know but.. with 6 images, that only work with 500% too... so i don't understand this part :/

  • @dragosdimitrie7368
    @dragosdimitrie7368 3 года назад +2

    Great vid! But how can i make the images appear on the full screen? Thanks!

  • @patrikmartic1609
    @patrikmartic1609 3 года назад

    You saved my life, thanks :)

  • @sa1koLo0p
    @sa1koLo0p Год назад

    omg amazing i very like it thank you

  • @moonlix
    @moonlix Год назад +1

    i need this , but i have only small pictures.. how can apply?

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

    loved this tutorial

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

    Thanks! Brilliant!

  • @KhoaNguyen-pw9xb
    @KhoaNguyen-pw9xb 3 года назад

    thanks bro : D , I like video of you

  • @JockieRafael
    @JockieRafael 3 года назад

    Why you write input radio with tag label? I don't understand this, can you explain me?