You never fail to amaze me. I was watching random stuff and saw this coming. Watched this and I'm sure I won't regret wasting the entire day. Nice video mate.
It's crazy how quickly you're not only able to describe but quickly code what's needed to be coded (obviously you may have practiced this before) but you teach well, thanks for this.
hi just found your channel, and just wanted to put it here i've been a front end engineer for the past 2-3 years and i found many little things that i newly learn from the way you write the animation Its amazing ! keep it up
I spent the whole evening creating a carousel that isn't even accessible, but he did it so easily. The part I particularly found difficult was to keep the carousel responsive and make sure it looks good on all sizes.
funny how you've mentioned that the CSS might have been difficult here, yet the only part that I struggled to fully understand was the JS script :D Thanks, very informative video!
这老哥写得可以，最近在准备亚麻前端的面试，image carousel是常考mini app。如果你也再找类似的solution的话，这个老哥推荐，不要找2021年以前的video了，并不是说BEM写法不好，太繁琐了，这个老哥的coding style很棒，逻辑也很清楚，说得也通俗简单，我没开字幕都全部跟下来了。 This bro did a pretty fantastic job! I have been preparing for the amazon FTE interview recently, and the image carousel is a frequently asked question. If you are also looking for a solution to prepare the interview, don't look up the video earlier than 2021, I mean I watched a couple of videos using the BEM method to name the class, that's a good and popular method developer used before whatever in USA or China, but I think it's too redundant. This bro's coding style is pretty good and his logic is great and explains everything in a concise way. I didn't turn on the English subtitle and can follow up on every step with him.
I enjoyed this and learned a lot but I'll have to watch at least seven more times to absorb it all. CSS selectors are my weak point so I'm always interested in learning new selector tricks.
8:20 I'd be interested in seeing a video/article that elaborates on this. I don't see how working with attributes instead of classes makes working with JavaScript any easier. If anything, it seems like it'd take more effort to do the same thing when using data attributes (e.g. typing attribute "data-blerg" vs. class name "blerg", querySelectorAll('[data-blerg]') vs. querySelectorAll('.blerg'), etc.). Any class name collisions (I think that's what you mean by the term "overlap"?) are avoided by having a good HTML/CSS design ahead of time.
Now that is funny... I was thinking exactly the same thing - except, I prefer using IDs as they differentiate the use of JS from CSS being used. However, this was still a great video to watch. Kyle does a wonderful job making these for us. :D
One good reason is future maintainability - if you come back to this code in the future and see loads of class names, you could easily be fooled into thinking you have CSS rules to go along with it. Also, a class like “active” is fairly common and could easily overlap with other display styles you have created which could cause odd rendering issues
Something that confused me for a moment was how in the html we are adding attributes such as "data-active" or "data-carousel-button", yet in the javascript we are referencing those attributes with the syntax "element.dataset.active" or "element.dataset.carouselButton". I was trying to figure out where the camelCased version of carouselButton came from, but it simply gets translated that way anytime you use "data-something" in the html tag, it will be referenced as element.dataset.something. And apparently if you used multiple dashed words like "data-some-thing-else" then it can be referenced as "element.dataset.someThingElse". Ok sure, though I'd recommend using camelCase in your html tags instead for better clarity. For example and will both be referenced as "element.dataset.someThingElse" in the javascript, so might as well use the camelCase in the html too
Is there a reason why you did not put the carousel buttons below the instead of on top? If they were placed below then there would be no need for z-index which can end up overlapping drop-down menus. Great video though, I will forever use this carousel. Thank you!
@@Steel0079 :focus adds an outline when you click with the mouse or tap with your finger. Outline is only needed for navigation when pressing the Tab key. To do this, they came up with :focus-visible - the state only when focusing from the keyboard.
In this video you use the spread operator on the array (script.js => line 11). I would love to see a more in depth video on this topic because I can't figure out how it actually works in a case like this.
The JS part was crazy as hell. I was with you until that very moment (probably because that was my very first time typing JS) lmao Still managed to do it though with minimal pauses :D
11:35 In instances where your offset is always small-ish, these two checks can be replaced with a single calculation: newIndex = (newIndex + slides.children.length) % slides.children.length; (This assumes there is at least one slide in the carousel.)
this carousel changing image once you click on arrow but is it possible to change it automatically and also work with arrow buttons... i mean slider will move images automatically :)
You are undoubtably a rock star! But who is this code "simplified" for exactly? Who is your target audience? I'm a beginner and it's really hard to follow. Regardless, I've learned so much from you. Thank YOU!
That's cool. But I was looking for a way to drag it.. Because I need to build a control which I need to be able to drag vertically.. Not like a input type=range though.. Because I need other (not draggable) stuff to be connected to it.. So I need to know the screen position.. I think.. I'm kinda new at this stuff.. I managed to drag divs before.. But now I need to contrain the dragging to horizontal and be able to drop it anywhere within a certain range.
Hi there, I tried this approach in one project where the carousel was contained inside a article and was only a part of the page. One difficulty I came across was that the image overflowed its container (it's height) even though the container dimensions of the article were defined and the img dimensions were set as in the video. This was resolved as width and height of all HTML hierarchy levels were set to 100%, and then the container dimensions were acknowledged. Could someone please explain why the first (video) approach didn't work?
When doing a querySelector for an element you want to interact with or that might have an event listener, is it common practice to use an attribute to select it instead of a class or ID?
I followed your video and developed code, I don't understand why I am not able to slide the photos. I can only see the first image. SOmething wrong with the Js
I've created a working carousel but the fade in and fade out effect don't work when the carousel buttons are clicked . The CSS is exactly the same as what's shown in this tutorial but the markups and Javascripts are a bit different. In my Carousel DIV the UL element only contains two list-items, images in both list-items are given an initial SRC values, and one of the list-items has the data-active property. When the Carousel buttons are clicked the data-active property is removed from one list-item and it is assigned to the other list-item. The SRC value of the image inside of the list-item which previously had the data-active property will remain the same but image inside of the list-item which now has the data-active property will be assigned a new SRC value from an array of SRC values. I don't know if the fact that my carousel doesn't have preloaded images is causing the fade in fade out effect to not work.
Hello! I really enjoyed this tutorial but even if I copy your exact codes, my Javascript file isn't linking with my HTML file. Im currently using VSC, could you please help me?
You never fail to amaze me. I was watching random stuff and saw this coming. Watched this and I'm sure I won't regret wasting the entire day. Nice video mate.
npc comment
the fact that you literally don't stop to explain for a bit amaze me. how can you keep explaining without hesitating
🤣😂🤣
It's crazy how quickly you're not only able to describe but quickly code what's needed to be coded (obviously you may have practiced this before) but you teach well, thanks for this.
hi just found your channel, and just wanted to put it here
i've been a front end engineer for the past 2-3 years and i found many little things that i newly learn from the way you write the animation Its amazing ! keep it up
Wow... the javascript part would have taken me HOURS. So elegant.
Another brilliant tutorial, Kyle. I really appreciate you!
With your help, I feel like I can truly become a web developer :)
I spent the whole evening creating a carousel that isn't even accessible, but he did it so easily. The part I particularly found difficult was to keep the carousel responsive and make sure it looks good on all sizes.
I give Kyle's videos a thumbs up right after the window opens, and then i watch the video after. quality work bro. Thanks
funny how you've mentioned that the CSS might have been difficult here, yet the only part that I struggled to fully understand was the JS script :D Thanks, very informative video!
这老哥写得可以，最近在准备亚麻前端的面试，image carousel是常考mini app。如果你也再找类似的solution的话，这个老哥推荐，不要找2021年以前的video了，并不是说BEM写法不好，太繁琐了，这个老哥的coding style很棒，逻辑也很清楚，说得也通俗简单，我没开字幕都全部跟下来了。 This bro did a pretty fantastic job! I have been preparing for the amazon FTE interview recently, and the image carousel is a frequently asked question. If you are also looking for a solution to prepare the interview, don't look up the video earlier than 2021, I mean I watched a couple of videos using the BEM method to name the class, that's a good and popular method developer used before whatever in USA or China, but I think it's too redundant. This bro's coding style is pretty good and his logic is great and explains everything in a concise way. I didn't turn on the English subtitle and can follow up on every step with him.
I enjoyed this and learned a lot but I'll have to watch at least seven more times to absorb it all. CSS selectors are my weak point so I'm always interested in learning new selector tricks.
So concise. A really great example. I learned a lot. Thanks Web Dev SIMPLIFIED!
you make something that took me a whole day to make and doing it while talking. that's awesome.
I learned a lot from this video Kyle. Thank you for all the excellent content you create.
8:20 I'd be interested in seeing a video/article that elaborates on this. I don't see how working with attributes instead of classes makes working with JavaScript any easier. If anything, it seems like it'd take more effort to do the same thing when using data attributes (e.g. typing attribute "data-blerg" vs. class name "blerg", querySelectorAll('[data-blerg]') vs. querySelectorAll('.blerg'), etc.). Any class name collisions (I think that's what you mean by the term "overlap"?) are avoided by having a good HTML/CSS design ahead of time.
Now that is funny... I was thinking exactly the same thing - except, I prefer using IDs as they differentiate the use of JS from CSS being used. However, this was still a great video to watch. Kyle does a wonderful job making these for us. :D
@@ShawnRitch Classes are better as you might have multiple carrousels on the page
@@lovefashro I think you could run into the same problem and you end up with data-carousel-button-2 and on
@@justindion4394 i was refering to using classes over ids
One good reason is future maintainability - if you come back to this code in the future and see loads of class names, you could easily be fooled into thinking you have CSS rules to go along with it. Also, a class like “active” is fairly common and could easily overlap with other display styles you have created which could cause odd rendering issues
In Portuguese I would say... "Tu é o cara!!" Once again and again.... thank you.
Something that confused me for a moment was how in the html we are adding attributes such as "data-active" or "data-carousel-button", yet in the javascript we are referencing those attributes with the syntax "element.dataset.active" or "element.dataset.carouselButton". I was trying to figure out where the camelCased version of carouselButton came from, but it simply gets translated that way anytime you use "data-something" in the html tag, it will be referenced as element.dataset.something. And apparently if you used multiple dashed words like "data-some-thing-else" then it can be referenced as "element.dataset.someThingElse". Ok sure, though I'd recommend using camelCase in your html tags instead for better clarity. For example and will both be referenced as "element.dataset.someThingElse" in the javascript, so might as well use the camelCase in the html too
Thank you very much, I was questioning the same thing
its in the html documentation that element.dataset-any-thing converts to anyThing if youre gonna reference it in JS
that code looks fancy!
you explain so well that it is easy to understand what you are doing!
This was a huge help, even learned a few new concepts! Thanks Bruv!
Thanks this is going to help a lot as I work to complete my homework assignment for Web Dev Fundamentals II at BYUI this week!
Finally Kyle using proper HTML semantics :D
Is there a reason why you did not put the carousel buttons below the instead of on top? If they were placed below then there would be no need for z-index which can end up overlapping drop-down menus.
Great video though, I will forever use this carousel. Thank you!
Great tutorial.
Great tutorial. Thanks for the clarity in the explanation and adding the additional details that might otherwise go un-noticed.
thanks man i am hoping to be a dev one day.its those types of videos that keep encourge me to cods.keep the good work
Very nice, you make it look so easy.
If I'll ever make a carousel in 15 min. I'll be awesome,... More awesome then I already am.
This was a lifesaver. Thank you!
It was amazing, and so much simple than some other carousel tutorials, thanks you very much !
this guy has names his channel so honestly.
The way you operated that JS made my head spin :D Great vid though, one of these day I am going to understand exactly what is going on here...
nice work!
p.s. replace all :focus to :focus-visible
@@Steel0079 :focus adds an outline when you click with the mouse or tap with your finger. Outline is only needed for navigation when pressing the Tab key. To do this, they came up with :focus-visible - the state only when focusing from the keyboard.
beautiful way of creating a carousel. Thanks!
Hi, just found your video here (never seen any of your videos before). 1:18 into the view, paused, subscribed. I can see this is going to be useful...
Your video always useful to me! I just struggled with how to solve the issues of vanilla js and css carousel. Thank you Kyle.
Clean, easy to understand, that's what I needed. Thanks a lot!
so cool dude, this is exactly the type of learning support I needed - thanks
Man you are my hero.......so smart. I salute you
This man is the Best! I think Kyle is a genius. 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍
In this video you use the spread operator on the array (script.js => line 11). I would love to see a more in depth video on this topic because I can't figure out how it actually works in a case like this.
cant wait to try this with react
Please make something like this but with swipe gesture too
Second that, a quick swiping tut would be a good follow-up video. Love your content!
The JS part was crazy as hell. I was with you until that very moment (probably because that was my very first time typing JS) lmao
Still managed to do it though with minimal pauses :D
thanks dude, that helped me a lot, greetings from colombia :) have a nice day
That ahen moment felt because of Kyle Cook😍👊
11:35 In instances where your offset is always small-ish, these two checks can be replaced with a single calculation:
newIndex = (newIndex + slides.children.length) % slides.children.length;
(This assumes there is at least one slide in the carousel.)
Yep.
Fantastic tutorial. Thank you!
Perfect little project for fe devs
thanks man never give up
amazingness in simplicity
That's exactly what i need man ❤️❤️❤️
Recently found out your channel and I am mesmerised by your work and skillset. Not to mention, quite jealous! Keep going Kyle, you have yourself a sub
You're working so fast damn
Always love your way man, congrats
Katar patar katar patar and boom 💥
Image carousel ready
you make it look so simple
Thank you very much for this lecture. I have just be able to execute a project with it.
nvermind i kept clicking left anyways it worked
thanks ILOVEU
thank you bro, you are awesome! nice tutorials
thank you! your tutorials are just amazing!!
Honestly overall designing carousel similar to what you did is not big think. Bu t I am simply amazed with the speed.
thank you very much! learn a lot step by step!
Helps me a lot, thanks, i appreciate your content a lot!!!
You make it look so easy. May I ask how long have you been coding for?
Thanks, this was educational and practical.
Excellent thank you!
"position this ab-so-lutely" *giggles to self*
Awesome! How about making a part two, where images are loaded from json via the fetch promise? 😉😉
I've seen lots of tutorials but no one came close this.
I was just going to see some new videos of you and you uploaded one video
this carousel changing image once you click on arrow but is it possible to change it automatically and also work with arrow buttons... i mean slider will move images automatically :)
How might you make this slider automatically activate every a few seconds, in addition to using these buttons? - Thanks for the videos!
Great stuff man !
Perfect this what I was looking for🥰👍🏼
Wow u kicked my ass, so much knowledge. Thank you!
Awesome sauce! Thanks :D
You are undoubtably a rock star! But who is this code "simplified" for exactly? Who is your target audience? I'm a beginner and it's really hard to follow. Regardless, I've learned so much from you. Thank YOU!
That's cool. But I was looking for a way to drag it.. Because I need to build a control which I need to be able to drag vertically.. Not like a input type=range though.. Because I need other (not draggable) stuff to be connected to it.. So I need to know the screen position.. I think.. I'm kinda new at this stuff.. I managed to drag divs before.. But now I need to contrain the dragging to horizontal and be able to drop it anywhere within a certain range.
Hi there, I tried this approach in one project where the carousel was contained inside a article and was only a part of the page. One difficulty I came across was that the image overflowed its container (it's height) even though the container dimensions of the article were defined and the img dimensions were set as in the video. This was resolved as width and height of all HTML hierarchy levels were set to 100%, and then the container dimensions were acknowledged. Could someone please explain why the first (video) approach didn't work?
thanks for another lesson bro
When doing a querySelector for an element you want to interact with or that might have an event listener, is it common practice to use an attribute to select it instead of a class or ID?
Great tutorial.
I'm getting this error: "script.js:3 Uncaught TypeError: Cannot read properties of null (reading 'forEach')
at script.js:3:8", how to fix that?
It's in this part:
button.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
You're the best!!!Thank you :)
I followed your video and developed code, I don't understand why I am not able to slide the photos. I can only see the first image. SOmething wrong with the Js
Thanks for this video
You rock man
How is this accessible? Does it work with keyboard only? If I have content within with links, can I select it only for active slide?
Hi Kyle,
Why you are using data attribute? Can you please explain why we are not using CSS class name?
very helpful tutorial
Thank You Sir!
So simple, but very effective!!! love your videos!
I've created a working carousel but the fade in and fade out effect don't work when the carousel buttons are clicked . The CSS is exactly the same as what's shown in this tutorial but the markups and Javascripts are a bit different. In my Carousel DIV the UL element only contains two list-items, images in both list-items are given an initial SRC values, and one of the list-items has the data-active property.
When the Carousel buttons are clicked the data-active property is removed from one list-item and it is assigned to the other list-item. The SRC value of the image inside of the list-item which previously had the data-active property will remain the same but image inside of the list-item which now has the data-active property will be assigned a new SRC value from an array of SRC values. I don't know if the fact that my carousel doesn't have preloaded images is causing the fade in fade out effect to not work.
Hey, how can i put text on each image and a button for like a store?
This is super cool
Great video! I love the video features. Which video editor do you use?
Hello! I really enjoyed this tutorial but even if I copy your exact codes, my Javascript file isn't linking with my HTML file. Im currently using VSC, could you please help me?
How can i make images automatic change
How do you make this slides automatically every a few seconds?
Thanks man. Very useful video.
How can we add auto slide to this?
Actually doing position absolute on .slide class bring all bottom elements on top of the carousel how to avoid this?
how to make the images slides automatically after certain seconds, instead of using buttons?