so this was one of the longer slide videos but absolutely worth the whole video, learnt so much about other features as well. Its crazy how much you keep learning the more you watch. ready for the second video mad keen and excited. Really worth the 22 minutes for anybody considering this video.
Love how you teach us! Please don't pay attention to the haters saying things about Zell's course. Keep doing what you are doing man! You've helped us out so much on so many levels! Thank you for this awesome tutorial!
I am interested in the algorithm that controls the transition when the images are sliced up and changes by squares or horizontal / vertical slices. Can you address that? I have been looking for years and have not been able to find how this is done.
Hey Kevin, I had a quick question. I was able to build a single carousel with no issue, the video provided above was simple to follow, but as I look to build a second and third carousel on the same page, I am running into the issue that the second html, I am adding for the second carousel it completely breaks the functionality of both carousel, is there anyway I can use an ID to call each carousel to avoid breaking the functionality? Thank you very much in advance.
Good question. It'll step up the complexity a little bit. You could give each one a different ID, or you could use a querySelectorAll('.carousel') to select them all in one variable. There might be a more efficient way to do it, but you could wrap all the code I wrote in this in one big function. Then, using an eventListener on each of the carousels, call this function when someone clicks in one. The big difference here would be the "const track" could be changed so that it would grab the track inside the carousel that was clicked only.... hopefully that makes a little bit of sense?
@@KevinPowell, that does make sense! The only issue now, is my knowledge in Java, haha, I am not too sure how to write that. Sorry if this is a big ask, still learning javascript. Thank you for your responses, you are a life saver.
@@KevinPowell Ok, so ive tried a variations of things but this is where I am at: Above your code, I added: function querySelectorAll('.carousel') { // within it, I added: const carousel = document.querySelectorAll('.carousel'); // above your const list, underneath the const list I added carousel.addEventListener('click', e => { const currentCarousel = track.querySelector('.current-carousel'); }) // then at the way bottom I closed the function. in my HTML next to but still no luck thank you for your help. Speak soon.
I love seeing these types of videos. Such great and detailed information especially for someone that likes to DIY their own websites or just want to actually learn how a carousel works instead of using something like slick or owl. Great base to start from and learn on your own. Overall, great video. Just a few critiques that I have. Maybe you can clarify them for me. 1. You used an additional classes on your .carousel__image class on 12:53. Why not just target them with CSS by saying .carousel__slide img like you did further down on 17:36? 2. On your .carousel__nav class at 20:50, you used display: flex; with justify-content: center;. What would be the difference of making it display:block; margin: 0 auto; ? That way its compatible with all browsers? I get that most every browser supports flex and I normally wouldn't care about it if it weren't for dumb IE. 3. How scalable is this? Meaning how does it look on all devices? I think with a few tweaks it might shine decent on a mobile platform. 4. This one is just more of a comment (haha, get it?), but I like seeing the bem usage here. What really would've made it shine is the use of scss or sass with it. It would've looked so clean.
Dear Mr. Powell, I really like this video but I am having problem with pictures stacking part. here is copy of it : Please I trying figure out what did wrong? the width of all photo is 1080 thank you for the help
Kevin, you have given me pause to consider Zell's course. I have subscribed to his website and I get his articles. I will take your suggestion on board and I'll take a good look at them to see if I like his teaching. I'll check out his Git lessons again. I like your 5 minute lessons, keep them coming please.
I have a question I made a carousel but its meant to be the length of the nav bar for example but the issue I am having is...it looks stretched out and loses quality? is this a img sizing issue or a css issue
hi i did the code exactly as you did however after doing the .carousel__slide part in css my pictures dont go on top of each other but remain one after the other. would you kindly help me please. cant continue with my slideshow if i dont have help
I don't know if ill get any help but i figured id ask. i fallowed along with this and the next tutorial but im having several issues with this carousel. the images aren't sizing right, the buttons to not position themselves next to the images and the css for the buttons does not take affect among a few other issues. any help i can get would be very much appreciated.
Nice! much appreciated! Btw is it possible to have a carousel with 150 items, I am trying to use bootstrap 5, anyhow I am not being able to link the external API to the carousel. Thanks for the Video
This is great, I think a subtle fade effect with/or a blend of animation effects will make it stand out. Mind doing a tut on same topic with tweenmax, slicebox, slick, opposite slider...for an amazing Ux. Just pick one Kevin, please. Thanks alot man.
love the quick B__E--M lesson thrown in just for good measure! Luckily I write my code quite similar to Kev, but for those that aren't yet down with 'BEM Naming' I would seriously check it out. I think Kevin has vids on it.
Hey Kevin, great work as always! I have a question for you. Why do you use double hyphen for your bem modifiers? Isn't it supposed to be single underscore?
@@KevinPowell "The modifier name is separated from the block or element name by a single underscore (_)." Just copied that from en.bem.info/methodology/quick-start/. Maybe they changed it at some point?
As far as I know, the official documentation is from getbem.com and the naming specifics are here getbem.com/naming/ Any use of it I've seen in the wild used the double hyphens...
@@KevinPowell Actually bem.info is the official docs, at least wiki says so. I've found out that a double dash style for modifiers is an alternative naming scheme. I guess it became more popular. The info on it is here en.bem.info/methodology/naming-convention/
Than you very much for this video. in actual fact its really help me a lot. I used native javascript but followed you closely till i got things done. But i have a request, can you do another video on same that when the document is ready, the carousel starts its job?. That will me much appreciated too.
vimeo its easy to add but youtube is not. It happens that some stills I have been involved on has been released on instagram, and I can not make them happen on the carousel straight from the gramm. Anyone about this? Lot to learn here...
Thanks! Awesome video can you do next video on tab accordions and other stuff using javascript? May be vannila javascript series where you build cool stuff?
Hi, Kevin how are you? I wanted to know while making a website responsive using Bootstrap do you slightly change the design for larger and medium devices or keep both xl and md screens same. Or depending on clients requirements you'll decide?
The changes for xl md and sm depend on what is happening in the container. You can never even tell your client what to do about it. Only if you make a site for specific resolutions if the client only wants a mobile version that is 375px and a desktop say 1440px, and it does not matter what happens to it ... I personally work to make the site from at least to the highest resolution, as I deal with design I never ask the client anything about it. Some clients will not even use externally libraries so you have to do everything manually, clean html css and vanilla
@@KevinPowell Yeah I got them working. BTW I had a problem with the CSS transform/translate configuration. Apparently on chrome it doesn't like the position absolute and bottom 0 on the carousel__slide class. I tried fiddling with it but kept failing. I removed that function and went to z-index instead of the transform/translate.
As silly as this might sound a hint to getting those control images would have been greatly appreciated. Just the png’s or jpg’s or svg’s or whatever images. But thank you for the video and good work.
Can someone explain to me what e => means in this code? nextButton.addEventListener('click', e => { const currentSlide = track.querySelector('.current-slide'); const nextSlide= currentSlide.nextElementSibling; const nextIndex = slides.findIndex(slide => slide === nextSlide);
technical works very well but have some issue...when change screen size, images dont update new size of container in some point and after that u can see two image in one slide...maybe make script for width of container and image width must base on that size...if you refresh page after change screen everything works fine. and last thing how make infinitive loop for next and prev button?after last image go on first, thanks :) i add this few line of code and that solved problem when change screen resolution auto update width of image window.onresize = function() { const slideWidth = document.querySelector('.carousel_track-container').clientWidth; slides.forEach((slide, index) => { slide.style.left = slideWidth * index + 'px'; }) };
Hi Kevin, your tutorials are amazing. The only videos I follow where I actually understand what you’re doing and why! Quick question, how easy would it be to add a swipe left and right motion on the responsive view rather than buttons, for mobiles and tablets? Thanks
The "__" underscores, and the "--" hyphens denote what they refer to as the BEM Standard, (B is for Block, E is for Element, and M is for Modifier) is a naming convention standard for CSS class names. I just prefer using my own standards, but to each their own. I just don't like their "standards".
the courses are not expensive, it is an investment ;) As well to type multiple text at the same time for me i need to push alt, doesnt work with ctrl, am i the only one?
I thought I was alright with css until I saw you.
Youve inspired me to get better
I love the way you describe everything from scratch level
Flag to hear that!
What an excellent teacher. This is the best css tutor I have ever seen
so this was one of the longer slide videos but absolutely worth the whole video, learnt so much about other features as well. Its crazy how much you keep learning the more you watch. ready for the second video mad keen and excited. Really worth the 22 minutes for anybody considering this video.
This was a really great insight into web development, kevin you absolutely know what you're doing and know exactly how to explain it. Great Teacher !
Content starts at 04:41. Nice video, thank you.
very very verrrry nice that you are giving us javascript videos
Fantastic videos - thank you. Didn't realise just how powerful JS is. Classes, Next/Previous siblings and Loops - superb explanations!
this whole time i thought I had to type div.carousel to get it to populate. thanks for making things even easier for me.
Love how you teach us! Please don't pay attention to the haters saying things about Zell's course. Keep doing what you are doing man! You've helped us out so much on so many levels! Thank you for this awesome tutorial!
Really good video so far, HTML and CSS has a lot of useful content still relevant 4 years later.
it would be extremely helpful if you gave the link to the images you used for the buttons and so because finding the right size and image is difficult
Great video! normally, when following tutorials, i always get stuck somewhere.. but here i could follow it 100%!
Thanks you Kevin, as always. One of the best free resource for front devs :)
just have been waiting for this kind of video, tomorrow I start to code it :D more JS videos pls :D
Oh wow! I subscribed already, I learned so much in this video. I know it was a JS video but I was more surprised with the CSS xD
Glad you enjoyed it and welcome aboard!
Thanks a lot! Happy new year, take care!
what size was your images that was used for the demo because something aint right
I am interested in the algorithm that controls the transition when the images are sliced up and changes by squares or horizontal / vertical slices. Can you address that? I have been looking for years and have not been able to find how this is done.
Than you so much Kevin Great Tutorial
So simple and familiar...I just kept screaming wow 😊...thank you Kevin
This is excellent. Easy to follow. Keep the good work. Onwards and upwards to the next video. Thank you very much for your efforts.
The 1st part 14:35, I doesn´t work for me
Where is the class carousel__image in your html? It does something when you write css for it, but I can't spot it in your html file at all
Oh never mind, I just came to the spot where you typed it in
First time I knew about object-fit: cover it's really amazing feature
Hey Kevin, I had a quick question. I was able to build a single carousel with no issue, the video provided above was simple to follow, but as I look to build a second and third carousel on the same page, I am running into the issue that the second html, I am adding for the second carousel it completely breaks the functionality of both carousel, is there anyway I can use an ID to call each carousel to avoid breaking the functionality? Thank you very much in advance.
Good question. It'll step up the complexity a little bit.
You could give each one a different ID, or you could use a querySelectorAll('.carousel') to select them all in one variable.
There might be a more efficient way to do it, but you could wrap all the code I wrote in this in one big function. Then, using an eventListener on each of the carousels, call this function when someone clicks in one. The big difference here would be the "const track" could be changed so that it would grab the track inside the carousel that was clicked only.... hopefully that makes a little bit of sense?
@@KevinPowell, that does make sense! The only issue now, is my knowledge in Java, haha, I am not too sure how to write that. Sorry if this is a big ask, still learning javascript. Thank you for your responses, you are a life saver.
@@KevinPowell Ok, so ive tried a variations of things but this is where I am at: Above your code, I added:
function querySelectorAll('.carousel') {
// within it, I added:
const carousel = document.querySelectorAll('.carousel');
// above your const list, underneath the const list I added
carousel.addEventListener('click', e => {
const currentCarousel = track.querySelector('.current-carousel');
})
// then at the way bottom I closed the function.
in my HTML next to
but still no luck thank you for your help. Speak soon.
having the same issue too
hey, one question: why don’t you use gap: 12px on carousel__nav instead of margin on the indicator elements?
I love seeing these types of videos. Such great and detailed information especially for someone that likes to DIY their own websites or just want to actually learn how a carousel works instead of using something like slick or owl. Great base to start from and learn on your own. Overall, great video.
Just a few critiques that I have. Maybe you can clarify them for me.
1. You used an additional classes on your .carousel__image class on 12:53. Why not just target them with CSS by saying .carousel__slide img like you did further down on 17:36?
2. On your .carousel__nav class at 20:50, you used display: flex; with justify-content: center;. What would be the difference of making it display:block; margin: 0 auto; ? That way its compatible with all browsers? I get that most every browser supports flex and I normally wouldn't care about it if it weren't for dumb IE.
3. How scalable is this? Meaning how does it look on all devices? I think with a few tweaks it might shine decent on a mobile platform.
4. This one is just more of a comment (haha, get it?), but I like seeing the bem usage here. What really would've made it shine is the use of scss or sass with it. It would've looked so clean.
Dear Mr. Powell,
I really like this video but I am having problem with pictures stacking part. here is copy of it :
Please I trying figure out what did wrong? the width of all photo is 1080
thank you for the help
Kevin, you have given me pause to consider Zell's course. I have subscribed to his website and I get his articles. I will take your suggestion on board and I'll take a good look at them to see if I like his teaching. I'll check out his Git lessons again. I like your 5 minute lessons, keep them coming please.
HIs course is great :).
As for my 5-minute videos, they'll be coming back in a few weeks :)
Hi! How was it? I'm also considering taking it. Just want to make sure 'cause it's kind of expensive.
Hi! Just wondering if all the images has to be exact same sizes or aspect ratio? I have varying sizes of images.
I have a question I made a carousel but its meant to be the length of the nav bar for example but the issue I am having is...it looks stretched out and loses quality? is this a img sizing issue or a css issue
What are the dimensions of the carousel images you used?
Do you have a link to the code? Can't seem to find it on your github or codepen. Thanks!
hes probably never going to upload the code sadly. im looking for it too.
hi i did the code exactly as you did however after doing the .carousel__slide part in css my pictures dont go on top of each other but remain one after the other. would you kindly help me please. cant continue with my slideshow if i dont have help
I don't know if ill get any help but i figured id ask. i fallowed along with this and the next tutorial but im having several issues with this carousel. the images aren't sizing right, the buttons to not position themselves next to the images and the css for the buttons does not take affect among a few other issues. any help i can get would be very much appreciated.
So how can i make a carousel for images of different aspect ratios? it's for an art portfolio website.
Nice! much appreciated! Btw is it possible to have a carousel with 150 items, I am trying to use bootstrap 5, anyhow I am not being able to link the external API to the carousel.
Thanks for the Video
Hi there, thanks for the delivery of such content. how do you add text on top of that carousel to slide together?
Top job Kevin. Happy New Year.
Happy new year 🎉
how to let the indicator to be dynamic so dynamically if I add more photos it's going to add more indicators?
How to animate these slides and how to make it in such a way that when it reaches the last slide, it goes to the first one?
Hi how can I split this into two slides meaning two images in first slide same with the second slide, thanks!
Amazing content! Thanks for this amazing tutorial!
my carousel__track-container dosent go behind all the images...it just a green box at the top
pls help
This is great, I think a subtle fade effect with/or a blend of animation effects will make it stand out. Mind doing a tut on same topic with tweenmax, slicebox, slick, opposite slider...for an amazing Ux. Just pick one Kevin, please. Thanks alot man.
sir do you use semantic tags? like header, footer, etc.? i am practicing the BEM methodology just like how you name the class. thanks
I do, yes, but I tend to give them classes as well. It obviously seems a bit redundant to have , but it's what I'm used to doing :)
Thank you sir kevin for the response😊.
Thank you mr. Powell!
Wow amazing vid , do u have a list of all the extensions you’re using maybe?
Thank you so much for this tutorial, Kevin. Which vscode theme are you using here?
anyone knows how can i make the carousel div the same height as the image (so it matches the size of the image when its resized)?
07:50 what worked for me was (Alt + Mouse click) for multicursor in Vs Code
love the quick B__E--M lesson thrown in just for good measure!
Luckily I write my code quite similar to Kev, but for those that aren't yet down with 'BEM Naming' I would seriously check it out. I think Kevin has vids on it.
Hey Kevin, great work as always! I have a question for you. Why do you use double hyphen for your bem modifiers? Isn't it supposed to be single underscore?
BEM uses double underscore for elements, and double hyphens for modifiers. There might be another naming convention which uses single underscores??
@@KevinPowell "The modifier name is separated from the block or element name by a single underscore (_)." Just copied that from en.bem.info/methodology/quick-start/. Maybe they changed it at some point?
As far as I know, the official documentation is from getbem.com and the naming specifics are here getbem.com/naming/
Any use of it I've seen in the wild used the double hyphens...
@@KevinPowell Actually bem.info is the official docs, at least wiki says so. I've found out that a double dash style for modifiers is an alternative naming scheme. I guess it became more popular. The info on it is here en.bem.info/methodology/naming-convention/
Finally i found tutorial without swiperjs
finally using javascript
Great tutorial! Question, I have a strange border on my dotsNav and arrows while active (down).
outline: 0;
give it in the button . problem will solve.
overflow-x: auto; DOES EVERYTHING FOR YOU! No need to swim in JS for sliders...
Thank you!
Than you very much for this video. in actual fact its really help me a lot. I used native javascript but followed you closely till i got things done. But i have a request, can you do another video on same that when the document is ready, the carousel starts its job?. That will me much appreciated too.
How do you create multiple carousel in one page? is that possible?
Thank you for the good work. Does it work only with pictures? can we mix videos and pictures?
No you can not
vimeo its easy to add but youtube is not.
It happens that some stills I have been involved on has been released on instagram, and I can not make them happen on the carousel straight from the gramm.
Anyone about this? Lot to learn here...
what size images did you use
Thanks! Awesome video can you do next video on tab accordions and other stuff using javascript? May be vannila javascript series where you build cool stuff?
I have created a flex footer, now it's not staying at the bottom of the page.
Good stuff as always
Hi, Kevin how are you?
I wanted to know while making a website responsive using Bootstrap do you slightly change the design for larger and medium devices or keep both xl and md screens same.
Or depending on clients requirements you'll decide?
The changes for xl md and sm depend on what is happening in the container. You can never even tell your client what to do about it. Only if you make a site for specific resolutions if the client only wants a mobile version that is 375px and a desktop say 1440px, and it does not matter what happens to it ... I personally work to make the site from at least to the highest resolution, as I deal with design I never ask the client anything about it. Some clients will not even use externally libraries so you have to do everything manually, clean html css and vanilla
thanks for this tutorial, it was useful
im kind of new with the __ on the class in css, i hope there's a reason for that, why is it?
I explain it in this video - th-cam.com/video/SLjHSVwXYq4/w-d-xo.html
where can i get the code for this?
Can I use thumbnails instead of the dot navigation?
Should work fine.
@@KevinPowell Yeah I got them working. BTW I had a problem with the CSS transform/translate configuration. Apparently on chrome it doesn't like the position absolute and bottom 0 on the carousel__slide class. I tried fiddling with it but kept failing. I removed that function and went to z-index instead of the transform/translate.
Can you take this code and duplicate it on the same page?
As silly as this might sound a hint to getting those control images would have been greatly appreciated. Just the png’s or jpg’s or svg’s or whatever images. But thank you for the video and good work.
Can someone explain to me what e => means in this code? nextButton.addEventListener('click', e => {
const currentSlide = track.querySelector('.current-slide');
const nextSlide= currentSlide.nextElementSibling;
const nextIndex = slides.findIndex(slide => slide === nextSlide);
moveToSlide(track, currentSlide, nextSlide);
toggleArrows(slides, prevButton, nextButton, nextIndex);
});
technical works very well but have some issue...when change screen size, images dont update new size of container in some point and after that u can see two image in one slide...maybe make script for width of container and image width must base on that size...if you refresh page after change screen everything works fine.
and last thing how make infinitive loop for next and prev button?after last image go on first, thanks :)
i add this few line of code and that solved problem when change screen resolution auto update width of image
window.onresize = function() {
const slideWidth = document.querySelector('.carousel_track-container').clientWidth;
slides.forEach((slide, index) => {
slide.style.left = slideWidth * index + 'px';
})
};
Where in the code did you add that? I added it at the end and it didn't work for me.
ur the goat for real
Can I get the Source Code?
Please I want to create a jumia app please help me 🥺🥺
can i use it 3 times in a page?
what is your vs theme?
LOL....from where to get those images ?
we need only that much code for carousal or we need to watch next video also:?
It's both videos. This one is the html and css, the next is the JavaScript
@@KevinPowell i follow your first video complete step by step but i dont know what mistake i have done .can u please share ur code??
7:50 its alt not ctrl
great video
Hi Kevin, your tutorials are amazing. The only videos I follow where I actually understand what you’re doing and why! Quick question, how easy would it be to add a swipe left and right motion on the responsive view rather than buttons, for mobiles and tablets?
Thanks
The "__" underscores, and the "--" hyphens denote what they refer to as the BEM Standard, (B is for Block, E is for Element, and M is for Modifier) is a naming convention standard for CSS class names. I just prefer using my own standards, but to each their own. I just don't like their "standards".
thanks for the vid! just a small contribution: it would be nice to add to the .carousel__indicator class the cursor pointer property :)
Howabout how to make it automatically slide
Is it responsive?
Thank you sir
the courses are not expensive, it is an investment ;)
As well to type multiple text at the same time for me i need to push alt, doesnt work with ctrl, am i the only one?
How to make that carousel autoplay
Kevin would you PLEAASEEE pleeeasee made the carousel but with thumbnails?
I prefer IDs for selecting in javascript
Video starts at 4:31
Thank You!!! :)
@8:04 , that is like coding at insane level , mmmmm Multi Threading Hehe , Let me also try that , that's new
Source code please .....
having the same issue too
so professional, how easy is it for u :D wanna be like u