I was intimidated when I saw a one hour long video and honestly, I can say that this is hands down the BEST tutorial I've seen on here. Definitely motivated me to refine my CSS skills! You got a new subscriber. Keep the content coming!
@leenardlacay34223 жыл бұрын
Similar sentiments
@emmanueleze30285 жыл бұрын
This is by far the best explained carousel Vanilla JS tutorial on KZbin. I love the fact that you allowed yourself make mistakes and also helped us figure out the solutions in camera. You have a true gift of teaching and you have inspired my Javascript journey. God bless you Mr. Kevin Powell. Big LOVE from Lagos, Nigeria!
@KevinPowell5 жыл бұрын
Very glad to hear that you liked the video, as well as my approach!
@bikramchettri94055 жыл бұрын
@@KevinPowell Can you do something like this? kzbin.info/www/bejne/Z5mrh6mriM2mfdE
@bitetheapple8 Жыл бұрын
Thank you for making these 2 videos!! The way you've broken down the project into smaller tasks & how you describe the whole process makes it quite easy to follow
@dtdionne4 ай бұрын
While a few years old still thank you for making these videos. Ur humility and authenticity (promote others hard work that helped you and not constantly requesting likes and subs) earned my subscription. Well done and thanks again.
@MsAnnieHuang3 жыл бұрын
It's July 2021 and I still coded along the whole tutorial. It is a very solid vanilla carousel. Great work, Kevin.
@leightonbuchanan-cates393210 ай бұрын
The most helpful video on photo slides I have ever come across. I love how clearly you explain your steps as well as why you choose certain steps over others. Engaging as hell and your voice is nice to listen to!
@antoniabradford93395 жыл бұрын
This is fabulous. Thank you so very much. The fact that you made a handful of errors, is absolutely wonderful. I wanted to add a carousel to our website, but I had no idea how to do it. Now I am 99% of the way there. Thanks again, and keep up the good work.
@korragnarok15362 жыл бұрын
you were born to teach. i cannot explain just how helpful your videos have been to me!
@ElementoryMyDearWatson4 ай бұрын
I agree and concur 100%
@fernandoboschiero1178 Жыл бұрын
Dude... these are the kinds of details that really help us learn. Thank you so much for this video.
@nohael-deeb58305 жыл бұрын
i feel comfortable with the way you explain everysingle step you make how you make it why you make it .. you're a proffessional you make it simple yet prof :)
@lnlupo952 жыл бұрын
Thank you very much Kevin. I needed to make a carrousel for my job, and you've just saved me. Also, this video helped me a lot to understand better how JS works. I've just subscribed to your channel, thanks for your good content!
@gaelfeilemen123456783 жыл бұрын
This is one of the best tutorials on CSS and HTML I've seen so far!
@jaypatel1393 Жыл бұрын
Definetly one of the BEST tutorials i 've seen - well explained - thanks
@Digital9633 жыл бұрын
your videos may not typically include JS but i gotta say, I def learned some cool JS stuff in this video that I had no idea you could even do! For example, "e.getBoundingClientRect" IF FREAKING AWESOME & I KNEW NOTHING OF IT !!! This ch is quickly becoming one of my fav go tos for quick tips & even quick fixes for my production level projects. Thanks man, I wholeheartedly appreciate the time & effort put into these videos. You're truly providing a great service. I hope I could one day positively affect so many people/life-time students a fraction of what you have. Thanks again! 😁
@miloskostic22395 жыл бұрын
Once again great lesson! I watched many tutorials on this subject and this is the only one that is easy to follow and well explained.
@doneilchapman154211 ай бұрын
Thank you, I successfully followed along and built out the entire carousel. I tweaked it to what I wanted and it was a good experience. I learnt alot.
@kaieverdeen94284 жыл бұрын
Learned a bunch of new JS stuff! Thank you for this! I was looking for videos on how to do carousel and stumbled on this. And I have to say, this is a godsend. Now I can put the finishing touches on my website project.
@Anuta2310 Жыл бұрын
Thank you a lot for this tutorial. Your explanations are super-clear. I followed your instructions and managed to build my own carousel. You are a great teacher!
@bongajewelmsimang533710 ай бұрын
wow not gonna lie I had to come back to this video a few times to get it right and finally its complete working accurately and have learnt so much in these two videos
@_alish_2 жыл бұрын
You are the best teacher I have even came across!
@smohammadhn3 жыл бұрын
used it in a vue/nuxt application with some modifications and it worked like a charm, perfect explanation
@rohitprabhu53213 жыл бұрын
I am a rookie/kiddie who was looking throughout the internet for a good mentor who can help me with the front-end. Seems like I found one finally! The most important thing that I learned from this video is to utilize console.log() in js for the testing purpose if everything is going right, or to find out any errors. I guess its really basic? But for a new learner like me, its a great start :) Thank you for such a great tutorial !!!...
@t-h7874 жыл бұрын
I honestly do not understand how people can dislike videos like this. Epic video, thank you so much!!!... liked & subbed & subbed to the JS course!!
@KevinPowell4 жыл бұрын
Thanks for the sub! And it's not a YT video if it doesn't have a dislike!
@MrKoniInTech2 жыл бұрын
man you're the CRATOS of javaScript "God of JavaScript" respect!
@xl81343 жыл бұрын
Kevin, you are such a good teacher! You've explain everything well.
@lookupverazhou85992 жыл бұрын
I built this out completely on my own using your HTML and CSS structure first before I watched your video. Boy, is your way more streamlined and clean than mine, and I definitely didn't complete it in under an hour lol. But I also added the functionality of being able to grab and drag the pics to move them, and messed around with the element to add some extra to it, so while the pics were in transition, or being dragged, the background would transition between two colors based on the mode RGB of each slide. That's really the best way to properly learn anything, though, doing it yourself, *especially* when you have someone else providing a solution in the end. As always, thanks for the video. Always informative!
@chelsealeonhardt1667 Жыл бұрын
Thank you so much for this tutorial! Even though it was long, this was very digestable and fun to follow along! Would love to see more javascript videos too!
@themorgue30385 жыл бұрын
This was my first attempt at JS. Thank you so much for the detailed video. A lot of pause and rewind, but I got it to work. Subbed and Liked!
@davidfranklin63 Жыл бұрын
Fantastic videos - thank you. Didn't realise just how powerful JS is. Classes, Next/Previous siblings and Loops - superb explanations!
@emmanuelrojasmusica2 жыл бұрын
This videos make you easly fall in love whith coding, Thaxs!
@glorp_productions5 жыл бұрын
*I've found another shorter way to hide arrows when it is end/start of slides. Here it is:* const checkNav = (targetSlide) => { targetSlide.nextElementSibling ? nextBtn.classList.remove('hidden') : nextBtn.classList.add('hidden'); targetSlide.previousElementSibling ? prevBtn.classList.remove('hidden') : prevBtn.classList.add('hidden'); } I've created this function and added it do all three event listeners, and there is just one parameter. Anyways, thaks for the vid, it was informative and interesting. Keep it up!
This is Frikkin' Brilliant. Really helped me make my JavaScript knowledge more concrete. Thank you!
@scriptsandtags3 жыл бұрын
Thank you so much. I learnt so many new things from this video, it is amazing how much Javascript can do
@kiroshi73642 жыл бұрын
wow this was an awesome guide! it was so complicated and i dont really understand most of it haha. looks like im going to watch this video over and over until i can make a carousel in my sleep
@tinotaylor4 жыл бұрын
Love the fact that you push people to go past your tutorials and build things. :)
@KevinPowell4 жыл бұрын
It's so important! I don't think I can ever say it enough.
@johndecosta82665 жыл бұрын
You’re a legend Kevin. I coded along with you (much use of pause button) by the end my brain was frazzled. Great work. Keep it up
@rohitnayyar5649 Жыл бұрын
I love your approach when it comes to explaining things. It really helps with logic building. Thanks Kevin. If possible please make more vedios on js.
@marcell935 жыл бұрын
Thank you soooo much for this video!! Been searching for days for a good tutorial and yours is the best one:) Keep up with the good work!
@HossamKhalaf-sr1oo5 жыл бұрын
Just finish it..thanks for your great effort, i hope you make more javaScript tutorials, your way of handling errors is really very valuable for us, makes us understand, not just copy the code from other screen, you are such a great teacher!!
@alfonsosimelio43884 жыл бұрын
This is a great tutorial, thank you so much for sharing! My first real JS exercise but I was able to follow along. I put the lines from the hideShowArrows function as part of the moveToSlide function in order to save typing :D
@leonardocastro70503 жыл бұрын
this is how every tutorial should be, amazing tutorial, thanks a lot for that amazing explanation!
@42savage5 жыл бұрын
Thanks mate, I learned something new, like array index, sibling and event listener trick
@shvideo15 жыл бұрын
What a great video. I followed both videos all the way and built this awesome widget. You are a great teacher. Thank you for sharing your knowledge.
@VictorSalaberry2 жыл бұрын
Thank you! This tutorial was awesome. I´m new to javascript and this was really helpful to start learning and reinforce the knowledge.
@anastasiiam99304 жыл бұрын
THE ONLY CLEAR EXPLANATION THANK U SOOO MUCH!!!
@asr842 жыл бұрын
This is great, it's just awesome to also learn JS with you!
@charlesxavier775 жыл бұрын
I did not appreciate this tutorial enough when I first made it. But now that I am trying to remake it and I have a better understanding of javascript. This tutorial is soo gooood! Maybe you can make a carousel that moves with a set time and maybe 1 that has smaller img, like you need on modern site now days
@cristiankaz2264 Жыл бұрын
Absolutely amazing !!! you are a saviour. You explain stuff very well, congrats
5 жыл бұрын
I'm working in a project that uses slides-like pages and I used mostly CSS to adjust position and sliding transitions. I think it's better semantically. Anyway, your project is amazing as usual. Every new video at least a little knowlege++.
@Noelciaaa2 жыл бұрын
Thank you so much for this! Now I will try to figure out how to make these loop and then, auto-slide
@work91672 жыл бұрын
Thank you, Kevin. This video has helped me a lot to understand such complicated topic.
@freshpootube Жыл бұрын
This is exactly what I'm looking for. I've built my first PHP/SQL gallery site. Hoping to get it up this week.
@luandesouza4503 жыл бұрын
Thanks for your video Kevin, It helps me a lot and also I learned how to use the selectors to handle the DOM. I love your content!
@patriciacostalonga52824 жыл бұрын
Thank you so much for this amazing tutorial and for putting all the effort in explaining every detail. I'm very happy that I could achieve the final result and understand all the steps :D
@electricimpulsetoprogramming2 жыл бұрын
como voce aprendeu programação?
@kostiantynkarzhanov92162 жыл бұрын
Awesome! Kevin, thank you very much for this lesson!
@iamdanielkip5 жыл бұрын
Kevin, I must say I learn a LOT through your channel and the way you present content, organize it and share it with us is really amazing. One specific doubt I would like you to tackle if possible is JavaScript vs. Css Animations. I heard people saying one is better over the other, lighter and more appropriate in some cases. The other thing I would ask is if at some point you could enter the WordPress world as well, since dynamic sites are often required by customers and most themes are super bloated. Thank you so much for sharing your knowledge with us and the constant good humor. Many thanks from Brazil!
@KevinPowell5 жыл бұрын
Glad you like my content Daniel! As for animation through JS or CSS, it really depends on what you need to be animating. In this case, I'm using JS, but the animations are CSS animations. The key to good CSS animations is sticking with opacity, scale, rotate, and translates. A lot more info on that here: medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 I haven't touched WP (in a big way, I do minor stuff with it for clients) in a long time, so we'll see on that one. My php is pretty terrible.
@iamdanielkip5 жыл бұрын
@@KevinPowell I'll check the article. Thank you for taking your time to answer me! :) Oh, another quick request. Any plans on making a video about masonry galleries? =D
@regimelesmoras78052 жыл бұрын
designing a website is so hard for me and I'm new to javascript and the css stuff. but if you know the function and method.. I know that I can read the codes fast and easy .. and know watching your video is so good and understandable.. the way you emphasize the variables and its purpose is so clear. at first i thought it was boring coz its a 1hr video... thumbs up to this and I subsribe also. :)
@JorgeRodriguez-qx6hw2 жыл бұрын
Thanks for this tutorial don't worry about the length of the video. It was just fine!!
O man, you should make definitely more java script materials. Your usage of functions I have never bumped into broadened my horizons,
@maymyatmon41554 жыл бұрын
Wow! Thank you so much for this two videos. I learned a lot. Love the way you explaining, it's super clear for a beginner like me. Thanks! :)
@bruceclothier30822 жыл бұрын
Thanks Kevin, you're a legend.
@laidback-luc3 жыл бұрын
this was truly a fantastic tutorial - thank you kevin
@ebesquin Жыл бұрын
Kevin Thank you so much. I learned a lot. Excellent Tutorial
@yaolin94202 жыл бұрын
this course is really amazing , thx for sharing this
@Cyber992213 жыл бұрын
This video was great man! Really motivated me to get started with my own personal projects.
@heartwagon5 жыл бұрын
Thank you so much for the tutorial! It really helps me finishing my project
@Pouckimon2 жыл бұрын
Thank you for all the great videos! 🙏
@declaudefrancois2 жыл бұрын
Kevin the king of javascript again 😃
@in2rythem3 жыл бұрын
Thank Kevin, always a big help for us beginners
@sivasirigiri66165 жыл бұрын
Sir, I really like your way of Teaching, I really feel you like my godfather in code, And I learn a lot from you whenever you make a video on code, And please make more videos on javascript, Thanks Siva
@alexawunor88535 жыл бұрын
This was great boss Learnt more than just creating a carousel
@erykkryszewski58035 жыл бұрын
awesome series, just finished it :) do you plan to ever do video about wordpress, creating kinda simple landing page, maybe show how to add own CSS styles into WP etc? would like to see such content from you, cause it's typical front/design and you definitely have knack for it
@j_u_d_y3041 Жыл бұрын
This is such an amazing tutorial! Love the way you explained each step~Definitely have learned a lot from you. Thank you sooooo much!
@akashgupta72146 ай бұрын
Total JS newbie but got everything, thanks
@TheRhinoDino2 жыл бұрын
Amazing video, super useful for one of my university projects! Thank you :)
@devilfrankjr4 жыл бұрын
Very usefull for my school project, thanks a lot Kevin!
@yankatanti21322 ай бұрын
thank you so much for these videos , i've really learned a lot of thing
@nimonschess4 жыл бұрын
Hi Kevin. Super helpful video. Had a question, as slideWidth is calculated on page load, it means that if I change the width of the page and expand/shrink the carousel then the slides are either too big or too small for the container. Do you know if it is possible make this responsive without having to refresh the page?
@lookupverazhou85992 жыл бұрын
'resize' event listener. Except why do you need this? It should be working already. The slide widths are based on a 100% of their parent.
@ExilesGate Жыл бұрын
Thank you Kevin! You are AWESOME!
@khanriza4 жыл бұрын
Thanks so many things I didn't know and I use Javascript daily
@ramonvidallon48974 жыл бұрын
Bravo! Thanks so much, your way of explaining the logic was clear and very simple. Thumbs up and subscribed!
@NiRoDesign5 жыл бұрын
Amazing video. You are clearly very knowledgeable and I'm loving your videos. In school we just started programming and they only spent a day and a half on javascript then moved along to jquery, so some of this was recognizable, but still very new to all of this and feeling like its something I will never be able to learn. I am building little code snippets just to save for future use though, and I am sure this will come in handy so it is much appreciated. You seem to be open to suggestions for future videos and I would love to see you expand on the carousel some more. It would be great to see how they are built when they rotate on a timer and once they reach the final image, it magically resets to the first one without any backwords scrolling through the images (if that makes sense). I look forward to absorbing more of your knowledge, Thanks again!
@zsoltnemesnyik34454 жыл бұрын
Cool tutorial, I've never built a carousel from 'scratch' before (used Bootstrap for this). Recently I've been tried to deepen my knowledge in JS, so I absolutely learned from it. Btw, I think you can remove 'track' from moveToSlide and 'slides, prevButton, nextButton' from hideShowArrows, they were declared and defined at the top of JS file, so they can be accessed inside your functions, instead of passing them amongst the arguments.
@christopherschwalbe20729 ай бұрын
Thank you for the amazing tutorial! Could you add a third part on making it and infinite scroll instead of hiding the buttons? Love your content. Thank you again!
@nunu-ig9bz4 жыл бұрын
such a great video, thank you so much! :DDDD your explanation was so detailed, i really love it, thanks mate! :DD
@tejasai35907 ай бұрын
Really helpful, worth watching.
@talkohavy5 жыл бұрын
First of all, great video! Kudos! Second, Could you please make a part 3? In which you would extend this singleSlide carousel into a multiSlide carousel? Say like... 5 slides at a time? You know, like websites do on a ProductPage where they show you "Recommended Items" at the bottom. Please please please.
@shahbokhari5 жыл бұрын
Superb Explanation! Great Work Kev!
@a.alharoun2 жыл бұрын
19:36 that consept called clear code any programmer should search for it and learn it to improve his programming skill And There Is says said ""Any Fool Can Write A Code Which Computer Can Understand But Only Good Programmer Who Write A Code Which Human Can Understand""
@andyriv3 жыл бұрын
This was amazing!! Such good explanations thank you!!
@davidsuchan16413 жыл бұрын
Awesome video Kevin, thank you so much!
@ajutamaluca2 жыл бұрын
Greate video, this helps me a lot. I am really thankful.
@MajedDalain3 жыл бұрын
u are really GREAT, I really enjoyed the details, thank u so much
@potatolord73194 жыл бұрын
The way you write code is really interesting to me
@PastequeDuTurFu3 жыл бұрын
Thanks for that video, it's hugly instructive
@greenmansession5 жыл бұрын
You are a fantastic teacher Kevin :)
@KevinPowell5 жыл бұрын
Thanks Aiden!
@Digital9633 жыл бұрын
you can also use template literals as so: track.style.transform = `translateX(${amountToMove})`; NOTE: the ` are tilde not quotes I love your content, the "modular" style projects and how you took the time to refactor to give us better understanding. Thanks!