How to code a carousel with HTML, CSS and JavaScript - from scratch (part 1)

Подписаться 919 тыс.

Просмотров 252 тыс.

50% 1

In this video I take a look at setting up a carousel, sometimes called a slider, for a website. In this one, I'm writing the HTML and CSS, which sets the stage for the JavaScript, which I look at in the next video.
Zell's course: learnjavascript.today
Zell's course changed how I approach JS and made me much more comfortable with it, and with it only open for a limited time I was glad to put this out to give you an idea of just a small fraction of the content you can learn from his course. I know it's expensive, and it's not for everyone, but it's really high quality and contains a TON of content.
4:32 - Starting the HTML
11:45 - Starting the CSS
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 148

@littlegrandbazar5526 4 года назад

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 !

@potatolord7319 4 года назад

I thought I was alright with css until I saw you. Youve inspired me to get better

@suvodipmondal1858 5 лет назад

I love the way you describe everything from scratch level

@KevinPowell 5 лет назад

Flag to hear that!

@jideanicelestine9400 Год назад

What an excellent teacher. This is the best css tutor I have ever seen

@simplymusical4583 3 года назад

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!

@bongajewelmsimang5337 7 месяцев назад

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.

@doubtdoubter4328 3 года назад

Great video! normally, when following tutorials, i always get stuck somewhere.. but here i could follow it 100%!

@davidfranklin63 Год назад

Fantastic videos - thank you. Didn't realise just how powerful JS is. Classes, Next/Previous siblings and Loops - superb explanations!

@bowbowbow22 2 месяца назад

this whole time i thought I had to type div.carousel to get it to populate. thanks for making things even easier for me.

@erykkryszewski5803 5 лет назад

just have been waiting for this kind of video, tomorrow I start to code it :D more JS videos pls :D

@chlouis-girardot 5 лет назад

Thanks a lot! Happy new year, take care!

@tolumideshopein 5 лет назад

So simple and familiar...I just kept screaming wow 😊...thank you Kevin

@gonzaotc 2 года назад

Thanks you Kevin, as always. One of the best free resource for front devs :)

@antoniabradford9339 5 лет назад

This is excellent. Easy to follow. Keep the good work. Onwards and upwards to the next video. Thank you very much for your efforts.

@alial-sanabani6656 Год назад

very very verrrry nice that you are giving us javascript videos

@DaMu24 8 месяцев назад

Really good video so far, HTML and CSS has a lot of useful content still relevant 4 years later.

@leonardocastro7050 3 года назад

Amazing content! Thanks for this amazing tutorial!

@itgiants5218 3 года назад

First time I knew about object-fit: cover it's really amazing feature

@alexgochenour8740 4 года назад

Content starts at 04:41. Nice video, thank you.

@a4yster 3 года назад

Thank you mr. Powell!

@TechAlphax 5 лет назад

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.

@martinkarugaba 4 года назад

Thank you so much for this tutorial, Kevin. Which vscode theme are you using here?

@RafaelRodriguez-ts2on 5 лет назад

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.

@johndecosta8266 5 лет назад

Top job Kevin. Happy New Year.

@KevinPowell 5 лет назад

Happy new year 🎉

@DongoBongKong 5 лет назад

Good stuff as always

@sampson1952 5 лет назад

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.

@jonathanargumedo7809 3 года назад

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

@KevinPowell 3 года назад

Glad you enjoyed it and welcome aboard!

@ebesquin Год назад

Than you so much Kevin Great Tutorial

@nic-nevell6795 3 года назад

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.

@diegoivangonzalezgonzalez506 4 года назад

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

@AhSoh7091 5 лет назад

finally using javascript

@Pe30Beat 3 года назад

thanks for this tutorial, it was useful

@Dlhruagan 4 года назад

Hi! Just wondering if all the images has to be exact same sizes or aspect ratio? I have varying sizes of images.

@bikramchettri9405 5 лет назад

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?

@tloumanamela9265 2 года назад

Hi there, thanks for the delivery of such content. how do you add text on top of that carousel to slide together?

@nanakwame6208 4 года назад

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.

@Tazmond_Merchant Год назад

Thank you!

@rtnulb 5 лет назад

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.

@KevinPowell 5 лет назад

HIs course is great :). As for my 5-minute videos, they'll be coming back in a few weeks :)

@albarleta2361 4 года назад

Hi! How was it? I'm also considering taking it. Just want to make sure 'cause it's kind of expensive.

@xilliman 2 года назад

hey, one question: why don’t you use gap: 12px on carousel__nav instead of margin on the indicator elements?

@XReaperX300 2 года назад

Wow amazing vid , do u have a list of all the extensions you’re using maybe?

@Limonische 5 лет назад

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 5 лет назад

BEM uses double underscore for elements, and double hyphens for modifiers. There might be another naming convention which uses single underscores??

@Limonische 5 лет назад

@@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?

@KevinPowell 5 лет назад

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...

@Limonische 5 лет назад

@@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/

@clydedsouza5843 3 года назад

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?

@joso157 2 года назад

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

@necronomicon-xmortis9362 Год назад

what size was your images that was used for the demo because something aint right

@MontyKsycki 5 лет назад

Thank You!!! :)

@cameronMbarrett 4 года назад

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.

@hakimdurand8427 Год назад

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

@revyvixen 5 лет назад

my carousel__track-container dosent go behind all the images...it just a green box at the top pls help

@itgiants5218 3 года назад

how to let the indicator to be dynamic so dynamically if I add more photos it's going to add more indicators?

@MultiHeartrock 3 года назад

What are the dimensions of the carousel images you used?

@Brug98 3 года назад

Finally i found tutorial without swiperjs

@bryandelacruz9066 3 года назад

Hi how can I split this into two slides meaning two images in first slide same with the second slide, thanks!

@TiagoSilva-sq4gp 2 месяца назад

Thank you sir

@GiancarloCarccamo 2 года назад

great video

@GerardoHernandez-hc1wp 5 лет назад

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.

@KevinPowell 5 лет назад

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?

@GerardoHernandez-hc1wp 5 лет назад

@@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.

@GerardoHernandez-hc1wp 5 лет назад

@@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.

@ylenarb 2 года назад

having the same issue too

@space_monkey125 5 лет назад

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?

@dimtodim 5 лет назад

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

@productiondepartment4546 4 года назад

Great tutorial! Question, I have a strange border on my dotsNav and arrows while active (down).

@afjalsharif2704 4 года назад

outline: 0; give it in the button . problem will solve.

@hermannrasch9033 Год назад

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

@dtdionne Месяц назад

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.

@user-is5bs8qb4y 3 года назад

thanks for the vid! just a small contribution: it would be nice to add to the .carousel__indicator class the cursor pointer property :)

@NouzenJ 5 лет назад

sir do you use semantic tags? like header, footer, etc.? i am practicing the BEM methodology just like how you name the class. thanks

@KevinPowell 5 лет назад

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 :)

@NouzenJ 5 лет назад

Thank you sir kevin for the response😊.

@anirudhgowda5904 2 года назад

So how can i make a carousel for images of different aspect ratios? it's for an art portfolio website.

@matthaverly98 4 года назад

Do you have a link to the code? Can't seem to find it on your github or codepen. Thanks!

@dreiigHiveSGClips 3 года назад

hes probably never going to upload the code sadly. im looking for it too.

@johnwilson7857 Год назад

what size images did you use

@tago7082 2 года назад

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)?

@IamPetrus 4 года назад

Thank you for the good work. Does it work only with pictures? can we mix videos and pictures?

@IamPetrus 4 года назад

No you can not

@IamPetrus 4 года назад

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...

@mbonnici3451 2 года назад

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

@Technoide1911 2 года назад

overflow-x: auto; DOES EVERYTHING FOR YOU! No need to swim in JS for sliders...

@shihab8123 4 года назад

can i use it 3 times in a page?

@enricogarcia5610 3 года назад

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

@Andy-pr5be 7 месяцев назад

07:50 what worked for me was (Alt + Mouse click) for multicursor in Vs Code

@dieinpieces8679 2 года назад

How do you create multiple carousel in one page? is that possible?

@Spookydigy 3 года назад

Can you take this code and duplicate it on the same page?

@parthparmar9798 Год назад

where can i get the code for this?

@korylinkin 4 года назад

im kind of new with the __ on the class in css, i hope there's a reason for that, why is it?

@KevinPowell 4 года назад

I explain it in this video - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SLjHSVwXYq4.html

@SSSoto17 6 месяцев назад

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

@SSSoto17 6 месяцев назад

Oh never mind, I just came to the spot where you typed it in

@eritreanism 3 года назад

what is your vs theme?

@BP-kc3dj 4 года назад

Can I use thumbnails instead of the dot navigation?

@KevinPowell 4 года назад

Should work fine.

@BP-kc3dj 4 года назад

@@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.

@bhavarkumavat3202 4 года назад

@8:04 , that is like coding at insane level , mmmmm Multi Threading Hehe , Let me also try that , that's new

@GauravKumar-ue7nz 3 года назад

Can I get the Source Code?

@prameelarani8005 3 года назад

Is it responsive?

@hitsharnam3177 3 года назад

LOL....from where to get those images ?

@cl3on482 9 месяцев назад

The 1st part 14:35, I doesn´t work for me

@MajedDalain 3 года назад

so professional, how easy is it for u :D wanna be like u

@dimtodim 5 лет назад

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'; }) };

@paulinabarton9218 4 года назад

Where in the code did you add that? I added it at the end and it didn't work for me.

@nomad100hd Год назад

I prefer IDs for selecting in javascript

@ylenarb 2 года назад

having the same issue too

@brianjett1446 Год назад

I have created a flex footer, now it's not staying at the bottom of the page.

@dameriandark1485 3 года назад

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); });

@haroldmcbroom7807 2 года назад

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".

@oluabayomioluwadamilare6097 2 года назад

Please I want to create a jumia app please help me 🥺🥺

@william_ade 3 года назад

Howabout how to make it automatically slide

@anotter_one 3 года назад

Video starts at 4:31

@mohammedirshad6497 3 года назад

How to make that carousel autoplay

@memoonashafqat1003 4 года назад

we need only that much code for carousal or we need to watch next video also:?

@KevinPowell 4 года назад

It's both videos. This one is the html and css, the next is the JavaScript

@memoonashafqat1003 4 года назад

@@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??

@Anasmehrab 3 года назад

new year 2021

@user-ew3vf4sx1k 6 месяцев назад

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?