HTML, CSS, JavaScript Carousel Tutorial Step by Step - JavaScript Tutorials for Beginners
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- In today's tutorial, I'll walk you through the entire process of building a JavaScript slider or carousel from scratch, making it an ideal guide for JavaScript beginners. While many developers opt for ready-made libraries to construct a JavaScript carousel, the truth is, you don't need to rely on third-party solutions; you can easily build one yourself using just HTML, CSS, and JavaScript. Within a span of just 30 minutes, I was able to assemble a functional carousel, complete with sleek transitions and responsive design. For those interested in incorporating an auto-play feature, I'll demonstrate how to utilize JavaScript's setInterval function to automatically transition between slides at set intervals. This comprehensive video tutorial is targeted at JavaScript beginners and is a part of my ongoing series focusing on fundamental JavaScript projects. So whether you're a web development freelancer, embarking on a web designer career, or simply eager to expand your web development skill set, this video will provide you with valuable insights and a hands-on approach to coding. Stay tuned for more content aimed at beginners, as I'll continue to produce in-depth tutorials that explore the basics of JavaScript, as well as other popular frameworks like React. Subscribe now to not miss out on upcoming web development courses and tutorials!
🛠️ What You'll Learn: You'll discover that while many folks opt for ready-made libraries for JavaScript carousels, creating one yourself is not as daunting as it sounds.
🕒 Time Investment: I managed to assemble a fully functional carousel in less than 30 minutes.
⚙️ Auto-Play Feature: If you're interested in adding an auto-play feature 🔄, I'll guide you through using JavaScript's setInterval function, which allows the carousel to automatically switch slides at set intervals.
👨💻 Target Audience: Whether you're a web development freelancer, venturing into a web designer career 🎨, or simply keen to boost your web development skills 📈, this video will serve you well.
📚 More Content: I'll be focusing on pure JavaScript essentials for upcoming videos, so we won't only touch on frameworks like React.
#ImageSlider #JavascriptTutorialForBeginners #JavascriptSliderTutorial #JavascriptSliderTutorialStepByStep #JavascriptTutorialForBeginnersFullCourse #WebDevelopmentFreelance #WebDesignerCareer #HtmlCssBootstrapWebsiteDesignTutorial #ImageSliderHtmlAndCssJavascript #LearnToCodeJavascriptForBeginners #WebsiteDesignBasicsForBeginners #JavascriptProjectsForBeginners #WebDeveloperDayInTheLife #LearnToCodeForFree #WebDevelopmentCourse
✅ Subscribe for more developer tips and tricks: bit.ly/Cogniti...
🐦 Stay in the loop on Twitter: / karlhadwen
🖼️ Code: github.com/kar...
🔥 Support the channel by becoming a member: / cognitivesurge
👍 Liked the video?
- Give it a thumbs-up 👍
- Share it with your network 🌐
- And don’t forget to SUBSCRIBE for more top-notch developer content! 🔔
🙏 Thanks for tuning in! See you in the next episode where we continue to make tech easy and accessible for everyone! ✌️
![ถามตรงๆ กับ อาจตุพร ทำไม ประเทศไทย ใครเป็นนายก ก็โดนด่า พอออกเเล้วคนคิดถึง!!?? l [Nickynachat]](http://i.ytimg.com/vi/3YFLMXxBGAs/mqdefault.jpg)
🔥 Support the channel by becoming a member: th-cam.com/users/CognitiveSurgejoin
✅ Please remember to Subscribe: bit.ly/CognitiveSurge
pro tip : watch movies at Flixzone. Been using it for watching a lot of movies during the lockdown.
@Frank Orlando yea, I have been using Flixzone} for months myself =)
This feels more like programming, the thoughts and confusions while coding, best tutorials
Thanks!
The only thing I regret is that I did not find your channel earlier. Thank you for actually explaining something rather that just reading what you have wrote.
Thank you!
thank you SO MUCH for this tutorial... I am taking JS course and my homework was creating carousel, and I had to idea how to do this... I've watched dozen of videos on youtube in Russian, English and Polish but all of them were too complicated and above my level, but yours is just PERFECT, thanks to you I've learned how to to it! and your way of teaching.. its different from other youtubers, but its a better one, because when you think what code to write next, it makes the viewers on the other side of the screen instinctively to think together with yout, not just blindly watching your work. good job!
Thanks mate, appreciate that :) Glad you got your homework done :D
After a long search in youtube I found your video i after the video I just subscribed
Thanks!
Amazing stuff Karl! really love how you brainstorm to overcome those problems👏🏼🔥
Thank you 🙌
Great man, I couldn't find any video with carousel slider button, you are a lifesaver! Thanks
Glad it helped!
Great tutorial with great explanations! Good idea of making more plain JS tutorials in the future ;) Thanks man
Not sure what sort of content you normally do but this video made me subscribe! Awesome video.. Hope you do more css and js 🤘
Thanks! Definitely, I want to do more videos around just HTML & CSS. Next week I'll be uploading a simple HTML, CSS video.
Thanks a lot for this video, I know that is 2024 but I could learn deeper this topic.
this is a very good tutorial, the way you explain what the code is going to do before you even try it, makes me like this tutorial more.
Also the thing that you wrote it WHILE doing the tutorial instead of pre-coding it before and than doing it without any mistakes in the video... idk man THANKS, KEEP IT UP!!!!
Thank you!
Thank you so much, the best carousel tutorial I've found
Glad it was helpful!
This helped me unlike the other tutorials, thankyouu
Great explaining, especially on the css.
Florian Kulig thanks! 😁
This helped me tremendously with a homework from a JS course, you're the true MVP! Thanks a lot!
Great to hear!
Although this was not what I was looking for, this was a great tutorial and it works so I can't ask for more.
Glad it helped!
its a best video becasue of the explanation , plz keep going
Thank you, I will
I struggle with making something similar. You saved me time and life
Glad my video helped :)
This was super helpful! Thanks So Much!
Glad it was helpful!
Top man! JS can be a nightmare to get your head round sometimes so this vid was really helpful for a beginner
Glad it helped!
awesome tutorial, thank you! its my first time creating a project using react and was able to make it all happen within a jsx file
Glad it helped!
This is a down to earth and very easy to understand tutorial on the subject, thanks for this 👍
You're very welcome!
Your video helped a lot! Many thanks!
Glad I could help, thanks Suzana!
Thank you for your video! it was easy to follow and you were thorough with every step.
Appreciate that, thanks Crisley!
you did great, dude! this is so nice, thanks for sharing.. you helped me grow. :'D you got another sub.
Glad I could help!
very clear bro. Thanks so much
Glad it helped!
Easy and Perfect!
Thanks!
Thank you 🙏 i needed this information
Glad it was helpful!
thanks man.. it's really helping..
Happy to help!
Bless this man
Thank you
Awesome tutorial!
Thank you! Cheers!
Thanks bro, heres a comment and a like
I appreciate it!
LEGENDICE
Thanks!
06:19 I noticed that it will actually be unnecessary to add `.carousel .carousel__item--hidden` since you never had it included in HTML. I deleted it from css and js and it still worked fine.
22:40
function updateSlidePosition() {
for (let slide of slides) {
slide.classList.remove('cell-visible');
slides[slidePosition].classList.add('cell-visible');
}
}
Also thank you for the video! I didn't realize how simple it was to create a carousel. I've looked everywhere for a video like this!
Thanks for pointing that out! I always end up leaving stuff in projects that I thought I'd need, but never do. It's not that hard is it? It seems hard but when you get to grips with the inner working of the carousel, it's not too bad :)
thank you for this tutorial
No worries!
Thank you very much! :)
No worries!
Amazing, It's more like learning together ☺☻♥🧠
Glad to hear that!
thank you for the great tutorial! really help with my project!!
Glad it helped!
tremendous help! thank you!
but, how do I get the carousel to be in the center of my screen? sorry I'm very new to this
Wrap it in a div and center the main div
Great tutorial and great explanations. Thanks
Thank you Paul!
Seems like a really good video. I was enjoying your thinking through the JS, but after the 6 commercial in the first 20 minutes, I had to give up.
Adblock xD
Nicely done great job
Thank you very much!
good job man
Thanks Pham!
In a professional setting, would you ever actually use vanilla JS to create something like this (image carousels, sliders etc) or would it all be done with frameworks/component libraries?
Depends on the company, but you'd want to be consistent I'd imagine so it'd be good to have something like this in a component library. When I worked at Sky, we built our own and put it into a component library.
Thank you very much ....
Welcome!
thank you very much, what about the three points which were under the carousel ?!
how can I relation it with the image
What do you mean?
tanks
dwell come
How would you incorporate the auto-play feature? Thanks for all your help
use a timer, maybe setTimeout to just autoplay?
What is the font name that u applied to vs code?
Casida Code (I think)
cool now for react js version maybe?
I could do? Would be much easier...
Do you at any point show the completed project? And using just 3 images?
At the end
Why didn't you set padding for carousel__actions which is the container of buttons instead of applying margin to each button individually ?! 12:47
Because then it adds unnecessary margin and my OCD wouldn't like that ;)
❤️❤️❤️❤️sir, shoping cart tutorials
Next few months!
Cool video!! Which vscode theme did you use here?
Github dark pro!
Nice vid but at the end I get an error : "Uncaught TypeError: slides[slidePosition] is undefined"
It does that everytime i have to get back to the beginning from the last slide (by clicking next) or from the first to the last one (by clicking previous). Any idea ?
Can you check the repo and see how your code differs to the one shown in the tutorial?
@@CognitiveSurge the thing is that it doesn't seem to differ at all... That's not a big deal but still
Brother whats the vscode theme name?
Github Pro Dark Theme!
cool
ty!
Hello, for some reason all of the code was working until I got to the JavaScript part. is there something that I need to install for java to run in visual studio? I even went ahead and copy and pasted your app.js code and index.html to triple check and its STILL not even working? May you please help?
What errors are you seeing in console?
@@CognitiveSurge There were no errors, That’s why I am confused I’m assuming that it was a class name error I probably made by misspelling, but that’s why I copied your code, but it still was not working. I can email you if you would like?
@@aliothcarsyn3952 Did you link your .js file on your index.html? You shouldnt need anything within VS code to run the javascript.
Hi is this responsive? thanks
Hmm, I can't remember xD but it should be fairly easy to make this responsive
But
How to make sure it doesn't end
Do a check to see if you're at the end and disable the right button. I'd check the length of the array vs. current position
how can i make it autoplay please??
try using just a setTimeout to switch it every X seconds
@@CognitiveSurge thank you
how do you copy and paste with keyboard?
CMD+C/P
Great bro, what is the name theme vscode?
I've forgotten for this :( it might be in the comments, maybe GitHub dark pro
How did you take carousel-item---hidden in css.. that's not mentioned in html😟
Which timestamp? did you get it to work?
@@CognitiveSurge at 4:32 in html there is no "courosel__item--hidden" but at 6:22 in css.. 😟 i didn't get that
Pleasure to watch you..Why do you use very high css specificity? like instead using just id's you write the parent class name then the child id and so on..
Old habits xD I like to be very specific - albeit I don't use IDs at all in my regular work
plz could u share raw code , thank you
github.com/karlhadwen/carousel
This is a slider, not a carousel. But thanks anyway very useful
Ok, thanks