Build a Carousel Component like Instagram purely in ReactJS and TailwindCSS

Подписаться 3,4 тыс.

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

50% 1

#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.co...
Socials:
Instagram: / ycldev
Twitter: / yourcodelab

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

3 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

@delgorithm 11 месяцев назад

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

@ycldev 11 месяцев назад

I appreciate your kind words thank you 😊

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

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

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

Always happy to prevent a bootstrap install😄

@arhabersham Год назад

New favorite channel ❤

@ycldev Год назад

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

@deewrekk7375 Год назад

Masterful. Top quality content. Thank you!

@ycldev Год назад

Really appreciate your kind response and glad you found value 😊

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

Bro, you should consider making an course. This is amazing. Thanks for the quality content!

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

Thanks for appreciating brother. But I don't plan on making courses any time soon.

@MTran-r8c 6 месяцев назад

Thank you so much for this helpful tutorial!

@ZiqiFang-c2u Год назад

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

@ycldev Год назад

Stay tuned for more 😊

@alissonperim7425 Год назад

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

@ycldev Год назад

Thank you for watching!

@gui_cabral_99 Год назад

That was a big help! Thanks man

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

Amazing tutorial man

@sherifdeenishola3331 Год назад

Short, precise and understanding

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

Amazing man you saved my day!! Appreciate

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

Have a nice rest of the day 🤟

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

keep doing this man!!! awesome

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

Thanks, I will!

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

@joshuagalit6936 Год назад

You earned my subscription brutha

@Thwaha 11 месяцев назад

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

@ycldev 11 месяцев назад

Thanks ☺️

@CarlosJimenez-du6zo Месяц назад

awesome!!

@M00nL1ght6 Год назад

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

@ycldev Год назад

Pleased to know it helped.

@min.min0 11 месяцев назад

Wow it is really helpful thank you keep going

@ycldev 11 месяцев назад

Glad you found it helpful 😊

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

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 8 месяцев назад

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 8 месяцев назад

Okay. We can achieve that with JavaScript

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

@quelvinmachadodepaula Год назад

Way to go man!

@elhamrajabi3492 Год назад

Thank you for your great article🌹🌹

@kunalukey5870 Год назад

Awesome! 🔥

@genibrylian493 Год назад

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

@ycldev Год назад

Glad you liked it. It means a lot!

@KevynGiron-qv9yg Год назад

Thanks for the video ❤

@ycldev Год назад

You are welcome ☺️

@slushiiforonda1473 10 месяцев назад

New subscriber thank you very much

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

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

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

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

@sefii05 Год назад

for the love of god, use a better font

@kevyyar Год назад

Oh I lovw that font ❤

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

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

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

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

@franciscoolivares1474 Год назад

Nice bro!

@rajRaj-tc5gl 21 день назад

thanks brooo

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

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

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

Instead of directly passing the images as slides wrap then in a relative div with absolutely positioned text that you want to show.

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

@malikahadali2188 Год назад

very nice and very informative video☺

@ycldev Год назад

Glad you liked it

@moxterin 10 месяцев назад

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 10 месяцев назад

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?

@harshitpant07 3 месяца назад

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

@ycldev 3 месяца назад

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

@codewithskills1470 4 месяца назад

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

@ycldev 4 месяца назад

Monokai Pro (filter spectrum) and Cascadia Code

@nathanielmitchell3344 3 месяца назад

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

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

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

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

@@ycldev thanks!

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

How do you fix the jump issue which occurs at very end of the slides

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

It isn't an issue, just going back to the fist slide. You can disable the next button when reached at the last slide.

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

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

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

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

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

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 6 месяцев назад

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

@alexg7282 5 месяцев назад

thank you

@ycldev 5 месяцев назад

You are welcome!

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

Awesome

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

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 6 месяцев назад

Are you sure you used images of similar dimensions?

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

@@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 6 месяцев назад

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

@ultragamersvk1668 11 месяцев назад

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

@ycldev 11 месяцев назад

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.

@jakereppuhn 11 месяцев назад

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 11 месяцев назад

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

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

@didaantruong4572 Год назад

Wow 🎉❤

@dawn_signal Год назад

excellent

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

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

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

How can be make it responsive?

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

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

@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

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

🎉

@ronaldchiagozie8317 4 месяца назад

best

@AriRaouf-kq4le 10 месяцев назад

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 9 месяцев назад

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.

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

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

good

@mosdev2091 Год назад

Merci !

@newHorizon985 Год назад

Font name please Looks good

@ycldev Год назад

Cascadia code with font ligatures on

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