Build a Carousel Component like Instagram purely in ReactJS and TailwindCSS

#reactjs #reactjstutorial #carousel #tutorial #tailwindcss #instagramclone
In this video you'll learn how to make a carousel or image slider component very much like instagram in ReactJS and Tailwind CSS from scratch (without any additional libraries) under 10 minutes. It works with images as well as videos and also supports auto sliding feature, previous/next controls and bottom indicators.
Code: gist.github.com/nimone/1fad7a...
Socials:
Instagram: / ycldev
Twitter: / yourcodelab

[@psyferinc.3573]

hmmmm i normally have to go through many many many videos . but this is just beauriful. one of those times where you feel emotional because you expected 4 hours on something but ended up understanding it and applyint it in 20 minutes . thank you my good sir.

[@ycldev]

Very much appreciate the response. I am glad I could save you some time 😄.

[@myblog8751]

Your way of teaching and quality content is so amazing. I hope you make more long hour project videos in react You got a new subscriber

[@ycldev]

Thank you, it really means a lot. I definitely have plans for react project videos.

[@user-vu9dl3vn7l]

Thank you so much for this helpful tutorial!

[@user-qi2hv3rx6l]

You're simply the best there is around here. Thank you very much Sir !

[@ycldev]

I appreciate your kind words thank you 😊

[@gui_cabral_99]

That was a big help! Thanks man

[@sherifdeenishola3331]

Short, precise and understanding

[@deewrekk7375]

Masterful. Top quality content. Thank you!

[@ycldev]

Really appreciate your kind response and glad you found value 😊

[@derolores]

Amazing video! I was about to install bootstrap whilst using tailwind...This one saved me < 3

[@ycldev]

Always happy to prevent a bootstrap install😄

[@user-wk7zm3od2o]

Awesome Video and detailed explanation! Thank you for this great tutorial!!!!

[@ycldev]

Stay tuned for more 😊

[@joshuagalit6936]

You earned my subscription brutha

[@quelvinmachadodepaula]

Way to go man!

[@kunalukey5870]

Awesome! 🔥

[@elhamrajabi3492]

Thank you for your great article🌹🌹

[@arhabersham]

New favorite channel ❤

[@ycldev]

Don't know what to say. I am overjoyed.

[@destroyerking7668]

Amazing man you saved my day!! Appreciate

[@ycldev]

Have a nice rest of the day 🤟

[@rossinifonseca5683]

keep doing this man!!! awesome

[@ycldev]

Thanks, I will!

[@genibrylian493]

Thanks, its a Great content. Keep Up the spirit. Subscribed!

[@ycldev]

Glad you liked it. It means a lot!

[@slushiiforonda1473]

New subscriber thank you very much

[@balls991]

Great, thank you.

[@min.min0]

Wow it is really helpful thank you keep going

[@ycldev]

Glad you found it helpful 😊

[@M00nL1ght6]

good job! you really helped me with my page c:

[@ycldev]

Pleased to know it helped.

[@franciscoolivares1474]

Nice bro!

[@KevynGiron-qv9yg]

Thanks for the video ❤

[@ycldev]

You are welcome ☺️

[@davique0]

thank you so much for this content, it is very helpful, is there a way to add the 3D effect, like you can see the previous and next slide on the sides with some transparency?

[@ycldev]

Hey Mario, thanks for the appreciation. At the moment I only have few pointers for the result you want: - Scale the active slide with large shadows. - Adjust the height of carousel container. according to the scale and expand the width (~3x) so that it can show the next and previous slides. - Add some spacing between the slides and make the inactive ones 40% transparent (or grayscale).

[@alissonperim7425]

That was amazing, because you made it simple, and efficient. Thanks for this vídeo.

[@ycldev]

Thank you for watching!

[@didaantruong4572]

Wow 🎉❤

[@watchnow4211]

Awesome

[@Thwaha]

Amazing.. Subscribed.. Like to learn more from you..

[@ycldev]

Thanks ☺️

[@otienodennis9571]

I would love to learn more of tailwind from you, you make it easy to understand.

[@ycldev]

Thanks for the kind words. Next video on react + tailwind components coming up this week 😉

[@dawn_signal]

excellent

[@mohdsahil226]

How can we repeat the sllider instead moving back to first image. like clicking on the last image should move left with first one

[@ycldev]

Slides appear in sequence, since you pass them as an array, I don't think what you want is possible with the current implementation. Since CSS translate property is doing the job of sliding them according to their positions.

[@alexg7282]

thank you

[@ycldev]

You are welcome!

[@malikahadali2188]

very nice and very informative video☺

[@ycldev]

Glad you liked it

[@swopnilmaharjan8630]

can u make it for more than one images ? it was sth like when we clcik next arrow button the image wud slide and in that spot the image wud come like form small to big.

[@ycldev]

You can map the slides in the carousel and then scale the previous and next slide to half. But you would have to replace the overflow-hidden on container to something that can accommodate 3 slides at a time.

[@mosdev2091]

Merci !

[@bestteam4805]

Very helpful and quick video. Is there a version that can be dragged left and right with the mouse?

[@ycldev]

I think that's not possible with our current implementation. You can look at the shadcn ui carousel component it is feature complete.

[@ronaldchiagozie8317]

best

[@JDUDEadventure]

Hi do you have a video on how to make this slide appear to transition infinitely instead of it reaching the end of the slide and moves back all the way to the beginning?

[@ycldev]

We currently do not. But we will definitely follow up on this video, and make it better.

[@moxterin]

Hi! First of all i want to thank you for the excellent material. How could i add text content for each slide? I have tried several things but none of them is working right now.

[@ycldev]

You can pass any html element as slide to this carousel. Have you tried passing a div with a background image and some content text?

[@indiegaming819]

how can i add a different text above each image, and translate each text according to the image ? BTY nice tutorial

[@diegocuevas3714]

Ty man, i was looking for this kinda video tutorial, can you tell us the vs theme u are using?

[@ycldev]

Hey Diego, I am using Monokai pro theme, filter spectrum to be precise.

[@nathanielmitchell3344]

Can this be changed to have a fade effect? For example opacity changing from 0 to 1 and back between images.

[@ycldev]

Try this: Instead of translating, set the opacity of all images to 0 and only turn it up for the active slide.

[@nathanielmitchell3344]

@@ycldev thanks!

[@attaullahkhan3931]

can you suggested for me . which node js version are using nowdays v16, v18 ?

[@ycldev]

I recently installed node 18 lts, using 17 in this video

[@emmachuksudeji9477]

This is just awesome. I appreciate it. Can you make the slider to continue in the same direction instead of the going backward when it gets to the end.

[@ycldev]

Thanks for the appreciation. With the current transform transitions it may not be possible. At the moment I can't think of another way for it to work.

[@emmachuksudeji9477]

Okay. We can achieve that with JavaScript

[@mohdsahil226]

Hi Can you make it work without style tag? only using tailwind classes? I want different layout with `LTR and RTL classes?

[@ycldev]

Don't know if that's feasible with classes. Your best bet for interpolating the state with styles is custom styling, although you can use external animation libraries to achieve the same.

[@pancham_barman]

on desktop mode it shows half the image and the other half of the next image, is there any way to so that it shows on one image at a time on desktop?

[@ycldev]

Are you sure you used images of similar dimensions?

[@pancham_barman]

@@ycldev yes they are almost the same, I tried giving separate width, and figured out that after 45~46rem, the next images tries to show up a little bit. So can you try to tweak it a little bit so that it can be used in full screen, on desktop mode. On mobile, since the width is less, it work fine..

[@ycldev]

Try using a max width on the container. But for full screen with the image may not fit perfectly so try object-fit cover or fill on the images

[@jacob_scott]

I want to build a carousel that goes forward from last slide to first. Every solution I find transitions backwards and glimpses over the slides in between very quickly

[@ycldev]

If you don't want the backward transition, just reverse the slides array you're passing it?

[@codewithskills1470]

can you tell me ehat kind of theme and font you use it amazing

[@ycldev]

Monokai Pro (filter spectrum) and Cascadia Code

[@wkmgaming6097]

In instagram if the images are more the dots are still remain this is the main functionality can u create this

[@ycldev]

A little tricky but you can start by limiting the number of max dots and decreasing the size of the first one if curr+2 > max dots and last one if curr+2 < number of slides

[@mrlectus]

Why use style attribute for the transformation and not tailwind?

[@ycldev]

Our transformation is dynamic and dependent on the state change. It won't work with tailwind since it wouldn't know how may classes for "translate-x-[dynamic%]" it would require (there can be any number of slides) and even if it works, it is a highly discouraged practice.

[@harshitpant07]

How can we add 3 card at one time and move 1 card on each click... Like review cards

[@ycldev]

You can increase the width of the container so that 3 cards are visible at a time and only translate one card worth of width

[@m__link6499]

I mean, how can we make sure that the slider shows only one Image at the time?

[@ycldev]

Make sure you use images of same dimensions.

[@m__link6499]

@@ycldev Thank you for your response. unfortunately, all the images have the same size, so the problem should be resolve anywhere else I think...😔

[@ultragamersvk1668]

would you mind teaching us how we can easily make responsive multipage websites easily

[@ycldev]

Well, I always try to make every project responsive. I am also planing to make multipage Nextjs apps in future. Hope that addresses your comment.

[@protamim_32]

How can be make it responsive?

[@ycldev]

It is already responsive you just have to limit the max width of the container for how wide you want the carousel to be.

[@newHorizon985]

Font name please Looks good

[@ycldev]

Cascadia code with font ligatures on

[@sefii05]

for the love of god, use a better font

[@kevyyar]

Oh I lovw that font ❤

[@weboff_official]

I have cards with 200 width and 1 just follow your steps then suddenly in just one click my 8 cards gone into hell😅🤣

[@ycldev]

Happens with me too. Carousel is very sensitive to width, just to be safe about the dimensions of the images, manually assign the desired width and height to the tag.

[@weboff_official]

No brother i have text in object looping it and make a 200×200 card but if we multiply current index to 100 then card disappears

[@weboff_official]

i want to show 3 cards at a time it's mean 200px it should move now if you have any suggestion or logic please tell me thank you

[@ycldev]

Oh my bad, now I get it. You have to adjust the translateX property. Since you are showing 3 cards at a time, so instead of translating 100% (full width), you should use 33.33% (1/3rd width). It should hopefully slide one by one now.

[@weboff_official]

thank you 💕 you earned a subscriber 🤗

[@8koi245]

no way, a fellow user of the useState snippet then just remove the e for import ~

[@ycldev]

Hey, thanks for watching. Didn't get the last part. I am not very good with custom vscode snippets.

[@8koi245]

@@ycldev it's not custom, it's just the shortcut for writing useState the if you remove the last e and write it again, the option for 2 auto import appears, way faster than importing it by hand

[@ycldev]

Oh, I got it. I normally remove the autosuggestions when I am recording the video so it does't clutter the screen. And bring them up with ctrl+space when I need them.

[@AriRaouf-kq4le]

Why you give the autoSlide prop a default value=false while you give it true when you set the autoSlide attrib in the parent 2.why you set children:slides.? Is not children destruction prop is enough .? Is it like default value or what? The react will auto know it’s children

[@ycldev]

Autosliding behaviour should be off by default in most usecases unless you need it everywhere. Children: slides is like setting slides = children, I thought I will be a more appropriate name.

[@Metovski]

children:slides what a weird usage

[@ycldev]

Got carried away calling them slides 😅

[@Metovski]

@@ycldev i see first time. i usually use children not children:slides

[@imheretosleep]

So no one's gonna talk about the fonts that he used in his code editor 😨

[@ycldev]

It is cascadia code 🤫

[@user-id2fu3ex8l]

Hi teacher ! I want to apply object-fit : cover to slide images, where should I put that property ?

[@ycldev]

You should directly appy it to the images (where you are passing them) and wrap the images with a div & set the desired width and height to the div.