Responsive Image Slider With Next & Previous Buttons | Autoplay - Pause/Play - HTML CSS & Javascript
HTML-код
- Опубликовано: 20 май 2024
- In this video, you will learn how to design a Responsive Image Slider with Next and Previous Buttons Navigation and Autoplay with Pause/Play on mouseover and mouseout EventListeners using HTML, CSS and Vanilla Javascript.
📚 Chapters
----------------------------
0:00 - Intro
3:12 - Files
3:27 - Image Slider (Html, Css)
11:39 - Image Slider Media queries (Css)
14:37 - Image Slider (Javascript)
+ Like and Subscribe 🔔 for More! 🖤
∎ Get This Project Source Codes - buymeacoffee.com/codingsnow/e...
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Source Codes & Download Images - codingsnow.com
∎ Download Source Files On Patreon - / 51122670
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
Image Source - www.freepik.com
Designed by upklyak / Freepik
#CodingSnow #WebDesign #ImageSlider
____________________
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.
Nice video! For anyone who wanted to do the slide without animation, it's simple.
.slide{ display: none} and then .active{display: block}.
I learned more from few of your videos then from couple of courses. Thanks man you are fantastic and desrve more subs.
Wow! This was fantastic! Thank you!
Thank you so much!!! You are amazing. Please continue.
Everything 100% Amazing!!👏
Thanks Mate! 😊
Thank you. Excellent tutorial.
Really amazing! Great work 😍
Thank you very much friend! ❤
Super
awesome
This is beautiful
Perfect !!
Loved the video bro thank you!
Thank you! this is very nice before this video was trying to do some mad things like animation.currentTime with the Web Animation API then fast forward the time with the CSS keyframes but now thank you this is WAAAY simpler!
My pleasure! 😊
great . I was in need of this. Thank you for passing on your knowledge. Grateful
You're most welcome! ❤️
Thank you from the bottom of my heart. I subscribed to your channel and liked this video because it's really cool
wow! thank you so much for this video. really amazing and helpful. you just earned a new subscriber. please keep up the good work 👏👏
Thank you so much!
💯 thanks sir.
Thank u my bro!
Great work, Thank you
thanks a lot brother
I read 'next' and thougt this was made with next.js :-) project looks beautiful!
Thank you very much! It's made with only using vanilla js. Pretty simple but, It took so much effort to keep the simplicity of the code and to perform the slider next, previous navigation with autoplay, and pause/play functionalities.
Love it thx!
Bien papi me has salvado
thanks guy... Video make me learn many interesting
Amazing! 💚 Can you please add one additional functionality, mouse/touch drag to left right slides?
Bhai tume Mila ye drag touch wali video
man thank u so much u are underrated
Most welcome!
Thank you very Much
Amazing! 💚
very helpful thank you
Wooooow...This looks amazing...❤❤👌👌😍😍
Thank you my friend! ❤
well done Bro!! I am Using Ur Website alot!! THNX
Thank you bro!! 😊
Thanks man..its code very usefull, i can developt it for one arrow function for 3 slider same time
thanks!
tysm bro
i love your work GG👍🏻👍🏻
Glad to hear that my friend! ❤️
great video
man you do all
so dmn good! This is all value. TY. (subscribed right away obv)
Glad you liked it ✌️
thanks for the amazing jobs it was really useful
My pleasure! 😊
sir what is the reason behind using clippath here sir ??how does it change the images ? is there not any method with out it
Top
Can you point me in the direction to change the clipping mask to a fade-in effect?
Hi. Thank you so much for sharing this amazing tutorial. I was curious if I am free to use this code anywhere?
hi it's really cool your videos and thanks a lot for everything but please i would like to know how to add paragraph or clickable link for each image
thank you from kurdistan
I have a problem with Js.
The scrolling of the images stops at the last one, without starting the round again. The error that the console gives me is the following: Uncaught TypeError: slides [slideNumber] is undefined. But why? I rewrote everything several times and it always gives me the same mistake
If I aim to achieve the animation reversed when clicking on the previous button, anyone that have a better understanding then me perhaps could guide me? I just starting to grasp the js concepts so very newbie. Would appreciate it a lot! Btw, love your videos!
hey community!
i really loved this slider, but can anyone guide me how i can remove clip-path: circle(0% at 0 50%);.
it seems when i make it clip-path: none; the images wont change?
is there is anyway to do this without clippath?
Hi, could you show how to do the same slider, but the previous image remains in the background as the new image appears?
if we are in 1st slide and click the 4th or any slide it is going again to 2nd slide
This video plsss
why you are using clippath here sir ?
Which software you used for this ?
whats a name the Application Editor that user you
your tutorials are really helpful but i cant seem to get the arrows working. any ideas on what it could be?
Glad it was helpful. Follow tutorial video, it will work.
may i request shopping cart tutorial., thank you so mcuh
Will the hovers and mouseovers work while viewing on a phone or tablet?
nope
Please any one to send me the import url for css the style sheets I need help
!!! Important
If code doesnt work. Add script tag for js at end of body.
Well daddy has saved me
How to active Code in bloger?
Hi I did exactly the same thing in the video but I'm getting an error at the addEventListener part saying that "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')". Can you help to resolve it ?
ever got an answer? I have the same issue...
@@Nilsketterer hi I solved it by including the javascript of the slider underneath the HTML code, meaning the javascirpt and html code of the slider needs to be in the same file (meaning no external reference)
@@kurosakura2102 thanks for your response, I will try it out!
I have a question. In this jquery code, "slideIcons.foreach((slideIcon)=> {slideicon.classlist.remove(active)....in this line , where the slide Icon declared. I see slideIcons being declared but i dont see any reference to SlideIcon... shed some light on this please. i am new at this
Classlist, classname main css element pe use hoti h variable pr nhi
my slider goes blank when i click on the next button on the last image or de prev button on the first image, anyone else having trouble with it?
yes, everything else works just fine, it's just that the slider won't loop. i hope someone can help me. thanks you a lot for the video, it was clear and i could follow it easily
starting music name please ??
liquid time
hi. i am unable to click on navigation buttons. I have copy pasted you code as is but its not working.
Yeah same here
From which country you belong to?
z-index not working
i hope you will Reply soon
sir please reply
This code does't work anymore
bro my javascript not working
Follow the video tutorial. It will work.
@@CodingSnow i follow the tutorial. i was almost there. im stuck on when i click on next btn class active doesn't add on slide
fablousely owsmm
Thanks man!
ther is a problem
vulu ... uku ...
🦨 🐰🐇 🕊
anyway to make the height of the navegation inherit the pictures?
i want the picture size to be dynamic according to the size of the tab its in
sir what is the reason behind using clippath here sir ??how does it change the images ? is there not any method with out it
from what I can see from me trying the code, clip-path is how the slides transition, without it I was stuck on the same slide and wasn't able to change it