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!
This is by far the best explained carousel Vanilla JS tutorial on RUclips. 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!
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
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!
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.
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.
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 :)
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!
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
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! 😁
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!
*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!
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 !!!...
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.
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!
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!
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
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
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
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!!
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!
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!
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.
@@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
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!
5 лет назад+1
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++.
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. :)
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.
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.
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
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
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!
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
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!
Thanks for the very detailed tutorial. Just what I needed. Next time can you show how to make an infinite carousel? It's just more complicated, and I haven't found a good tutorial that explains the code needed to do it.
Very easy, actually. You are talking about making it loop to the beginning when at the end, etc? Make a second copy of the track, and place it side by side inside a container-track. When you're at the end of that container, move the front track to the end . When you're at the beginning of the container, move the end track to the front. Is that what you're talking about?
Implementing this into multiple sections/cards/modals would be helpful too. Every tutorial uses a single implementation on the projects, queryselectorall() is a thing! It'd be good to show how to code it up so it works in multiple places.
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""
Part 3 of this (haha) I would like it to be how to turn this carousel into a loop-around, instead of just making the previous and next buttons disappear. (with the caliber of this learning, i feel like I should just play w the code until I figure out the loop-around way of doing it myself). I would also like to know how to do the fade/opacity version of the slides. Thanks for this series, I learned a lot! :)
You can make your life easier by just doing const items = document.querySelectorAll('.carousel__items) items.forEach((slid, index) and so one and you can get the width by just doing items[0].clientWidth reduce your code
00:52:00 In this part I just added the attribute "value" to my html elements like " value="#" "... So in code I just call " currentSlide.value " and I already know what index it is. HTML5 allows you to use custom attributes (must be start with "data-"): then, call with: // More code myDiv.dataset.word myDiv.dataset.key myDiv.dataset.column
![Ice On My Teeth - ATEEZ エイティーズ 에이티즈 [Music Bank] | KBS WORLD TV 241115](http://i.ytimg.com/vi/c-n92OgbbwA/mqdefault.jpg)
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!
Similar sentiments
This is by far the best explained carousel Vanilla JS tutorial on RUclips. 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!
Very glad to hear that you liked the video, as well as my approach!
@@KevinPowell Can you do something like this? ruclips.net/video/1hHVvuShsGo/видео.html
It's July 2021 and I still coded along the whole tutorial. It is a very solid vanilla carousel. Great work, Kevin.
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
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!
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.
you were born to teach. i cannot explain just how helpful your videos have been to me!
I agree and concur 100%
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.
Dude... these are the kinds of details that really help us learn. Thank you so much for this video.
This is one of the best tutorials on CSS and HTML I've seen so far!
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 :)
Definetly one of the BEST tutorials i 've seen - well explained - thanks
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.
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!
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.
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
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! 😁
You are the best teacher I have even came across!
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!
*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!
onload prevBtn still showing to me.
fixed with:
window.addEventListener("load", () => {
prevBtn.classList.add('hidden');
});
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 !!!...
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.
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!
used it in a vue/nuxt application with some modifications and it worked like a charm, perfect explanation
man you're the CRATOS of javaScript "God of JavaScript" respect!
Kevin, you are such a good teacher! You've explain everything well.
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!
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!!
Thanks for the sub! And it's not a YT video if it doesn't have a dislike!
This videos make you easly fall in love whith coding, Thaxs!
Love the fact that you push people to go past your tutorials and build things. :)
It's so important! I don't think I can ever say it enough.
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.
Fantastic videos - thank you. Didn't realise just how powerful JS is. Classes, Next/Previous siblings and Loops - superb explanations!
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
Thank you so much. I learnt so many new things from this video, it is amazing how much Javascript can do
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
O man, you should make definitely more java script materials. Your usage of functions I have never bumped into broadened my horizons,
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
this is how every tutorial should be, amazing tutorial, thanks a lot for that amazing explanation!
Thank you so much for this! Now I will try to figure out how to make these loop and then, auto-slide
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!!
This is exactly what I'm looking for. I've built my first PHP/SQL gallery site. Hoping to get it up this week.
Thanks mate, I learned something new, like array index, sibling and event listener trick
THE ONLY CLEAR EXPLANATION THANK U SOOO MUCH!!!
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!
This is Frikkin' Brilliant. Really helped me make my JavaScript knowledge more concrete. Thank you!
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!
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!
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.
@@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
Thank you! This tutorial was awesome. I´m new to javascript and this was really helpful to start learning and reinforce the knowledge.
This is great, it's just awesome to also learn JS with you!
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
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!
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++.
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. :)
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.
Bro I genuinely love you
Absolutely amazing !!! you are a saviour. You explain stuff very well, congrats
You're a superstar! Now to put this on a timer.
setInterval(function() {
const currentSlide = track.querySelector('.current-slide')
const nextSlide = currentSlide.nextElementSibling;
const currentDot = dotsNav.querySelector('.current-slide');
const nextDot = currentDot.nextElementSibling;
const nextIndex = slides.findIndex(slide => slide === nextSlide);
if ((slides.findIndex(slide => slide === currentSlide)) === (slides.length -1)) {
slides.forEach(setSlidePosition);
slides.forEach(slide => slide.classList.remove('current-slide'));
dots.forEach(dot => dot.classList.remove('current-slide'));
slides[0].classList.add('current-slide');
dots[0].classList.add('current-slide')
const currentSlide = track.querySelector('.current-slide')
const nextSlide = currentSlide.nextElementSibling;
track.style.transform = 'translate(-' + currentSlide.style.left + ')';}
else{
moveToSlide(track, currentSlide, nextSlide)
updateDots(currentDot, nextDot);
hideButtonsAtEdges(slides, prevButton, nextButton, nextIndex);
}
console.log("This message will appear every 3 seconds.");
}, 5000); // 5000 milliseconds = 5 seconds
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.
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.
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!
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
Thank you, Kevin. This video has helped me a lot to understand such complicated topic.
Total JS newbie but got everything, thanks
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
Thanks Kevin, you're a legend.
Kevin the king of javascript again 😃
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!
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
como voce aprendeu programação?
The way you write code is really interesting to me
Everything here well detailed 👌...Love it
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!
this was truly a fantastic tutorial - thank you kevin
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! :)
Thanks for this tutorial don't worry about the length of the video. It was just fine!!
Thanks for the very detailed tutorial. Just what I needed. Next time can you show how to make an infinite carousel? It's just more complicated, and I haven't found a good tutorial that explains the code needed to do it.
Very easy, actually. You are talking about making it loop to the beginning when at the end, etc? Make a second copy of the track, and place it side by side inside a container-track. When you're at the end of that container, move the front track to the end . When you're at the beginning of the container, move the end track to the front. Is that what you're talking about?
This video was great man! Really motivated me to get started with my own personal projects.
Thank you for all the great videos! 🙏
Awesome! Kevin, thank you very much for this lesson!
Implementing this into multiple sections/cards/modals would be helpful too. Every tutorial uses a single implementation on the projects, queryselectorall() is a thing! It'd be good to show how to code it up so it works in multiple places.
This is such an amazing tutorial! Love the way you explained each step~Definitely have learned a lot from you. Thank you sooooo much!
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""
this course is really amazing , thx for sharing this
Kevin
Thank you so much. I learned a lot. Excellent Tutorial
This was great boss
Learnt more than just creating a carousel
Thank you Kevin! You are AWESOME!
Thank you so much for the tutorial! It really helps me finishing my project
Thank Kevin, always a big help for us beginners
Thanks so many things I didn't know and I use Javascript daily
I almost cried when it all finished and worked as "expected" 😭😭😭😭
Really helpful, worth watching.
Superb Explanation! Great Work Kev!
thank you so much for these videos , i've really learned a lot of thing
Bravo! Thanks so much, your way of explaining the logic was clear and very simple. Thumbs up and subscribed!
Amazing video, super useful for one of my university projects! Thank you :)
Part 3 of this (haha) I would like it to be how to turn this carousel into a loop-around, instead of just making the previous and next buttons disappear. (with the caliber of this learning, i feel like I should just play w the code until I figure out the loop-around way of doing it myself). I would also like to know how to do the fade/opacity version of the slides. Thanks for this series, I learned a lot! :)
I think there is a comment or two that mentions how to do the looping. Not really sure what you mean by the fade / opacity?
@@KevinPowell go daddy (a coder's nightmare), has a carousel and the transition to the next pic is the current pic fades out, while the next fades in.
Overall, this was great and a lot of fun, def not complaining.
Very usefull for my school project, thanks a lot Kevin!
I learned a lot with your video. Thanks so much!
You can make your life easier by just doing const items = document.querySelectorAll('.carousel__items)
items.forEach((slid, index) and so one and you can get the width by just doing items[0].clientWidth reduce your code
00:52:00 In this part I just added the attribute "value" to my html elements like " value="#" "... So in code I just call " currentSlide.value " and I already know what index it is. HTML5 allows you to use custom attributes (must be start with "data-"):
then, call with:
// More code
myDiv.dataset.word
myDiv.dataset.key
myDiv.dataset.column
Thanks, Kevin. Great series.
You are a fantastic teacher Kevin :)
Thanks Aiden!