Build a Carousel Component like Instagram purely in ReactJS and TailwindCSS

so how do you make a carousel or image slider with smooth transitions from one slide to another like you've seen on Instagram and all that too with video support and auto sliding features so let's find out I have these dummy image URLs here you can use your own images but make sure they are of the same width and height and I'm mapping them to images or slides for the carousel so we can have something to look at while we're building it limit the max width of the container otherwise it will spend as much as the dimensions of the images you are using finally let's build our corrosal we are passing the slides as children let's just see how they appear we want them in a row not columns so we'll apply flexbox and we want them to appear one at a time so make overflow hidden also make it relative so that we can put the navigation buttons on top of it let's make our navigation section just two buttons to go to next and previous slides I'm using chevron's like Instagram use arrows if you prefer and to put them on top of the carousel use position absolute Center vertically and space between with some padding to the whole section we will just quickly style these buttons completely rounded with some shadow background white with 80 opacity icons dark gray on Hover background 100 White same with the other button foreign logic we need a state to decide which slide to show and we'll use the index of the slide for that initially it's zero so the first slide will be shown next up we need two functions to go to the previous slide first check if we are currently on the first one if it is go to the last slide otherwise current -1 and to go to the next slide check if we are on the last one if so we'll go to the first slide otherwise current Plus 1. now attach these two R buttons on click and finally let's make our slides slide according to the state we'll need transition from transform property and duration that you prefer apply transform with translate X negative because we want it to slide from right to left current index times 100 percent so if the current index is zero it stays where it is if it is 1 it will translate left hundred percent if it is 2 it will translate left two hundred percent and so on now let's make the indicator section that shows how many slides there are and which one of them is currently being shown similar to our buttons make it absolute we want it to appear at the bottom left and right 0 to fully span the horizontal space another container that will make it completely centered and some gaps between the indicators for each slide we need an indicator we'll apply some transitions to these as well same width and height background white and make them circular and if it indicates the current slide add some padding to make it a little bigger otherwise set the opacity to 50 percent maybe decrease the padding a bit it's too big for an indicator that'll do and your own Instagram like arousal is basically done but if you also wanted to slide automatically after a certain interval it is actually pretty easy let's add this feature too pass it as a prop so you can enable this feature and the interval after which it'll Auto slide will set the default to 3 seconds we'll need the use effect hook if Auto slide is disabled will not proceed further otherwise we'll use the set interval function it will execute the next function every certain duration that is our Auto slide interval it is best practice to clear this interval when the carousel unmounts and that's actually it Let's test this feature it's sliding every three seconds let's set it to one second refresh it's working pretty good let's see if it can also handle a video I'm using a video of the same dimensions as of these images we'll have to include the video in the area of slides we already have we want the video to go to place since chrome doesn't support unmuted videos through autoplay will have to mute it and play it in a loop that's it it should work now let's see you can play around with other HTML elements that can also appear as slides for our corrousle

Channel: Your Code Lab

Views: 82,241

Keywords: reactjs, tailwindcss, javascript, webdev, web development, coding, programming, react components

Id: XJSOgV4VELk

Length: 9min 49sec (589 seconds)

Published: Thu Jan 12 2023