Radio Inspire

How To Learn Sign Language

Build an Image Carousel with React in 5 Minutes (incl. Gesture Support, Hooks)


In this video we’re gonna create a
gallery and moving carousel from scratch with React in less than 5 minutes. We’re
gonna add some features that make it possible to go back and forth in the
gallery even as the carousel is moving. We’ll add
gesture support so users with that are on mobile devices will be able to
navigate between the images and we’re also going to make this with the help of
React hooks. So let’s make this by heading to the following CodeSandbox
repo that I’ve created for you. You can find that in the description. We just
have a basic React app with an images array consisting of a number of links to
images at unsplash.com and we also have the dependencies that we’ll need already
installed–react-gesture-gallery and react-gesture-responder. So we’re
gonna need a couple of components from react-gesture-gallery to make our
gallery; those are gallery and gallery image. We’ll replace the div that we’re returning
from App with the gallery component and between its tags we’ll iterate over
images with .map() and we’re gonna display each image with a gallery image
component which has a src prop which we’ll set to the image URL, but we don’t
see any images currently and that’s because we need to tell gallery which
index of the array that we’re on so we need to set the index prop to an array
element, so we’ll set that to the 0th index and we can see the first element
in the array. However when we click on this arrow button to go to the next
image, nothing happens. Ideally we want to go from the first image, the 0th index, to
the first one to the second one, etc. So we need to store this index value and to
do that we’ll create some state with React.useState(). So we’ll make an
index piece of state with the starting value of 0, call this index, and to update it we’ll
call a function called setIndex. Now the index prop is going to be set according
to state and to get the current index that we’re on
we’re going to update our index state based off of with setIndex, we have a
function called onRequestChange, it’s a prop from gallery, we get the current
index which we’ll call i in the parameters of this function and we’re
going to update our stored index value in state with setIndex and can
do that by passing i to it. So now when we click on the arrow button we go from
one image to the next one we have this nice transition effect and when it’s
possible we can go back to the previous one with the back button. However the
images aren’t oriented very well. We can fix this in a couple of ways: we could
set the objectFit prop on gallery image to determine how the image takes up the
available space in the page, so we could set objectFit to cover or fit but we’ll
leave it at its initial value of contain to have it remain at its
original dimensions and instead we’re going to set the gallery size we’ll make
it the entire height and width of the page of the viewport by setting height
to 100 view heights, width to 100 view widths and we can also set the
background color, you can set the background attribute, to say black. So now
we have our completed image gallery, however, to navigate from one to another
we have to use the arrows or using the react gesture responder we can swipe
like so, we can drag from one image to another, but we can’t go from one image
to another automatically so we don’t have a complete carousel yet. So to go
from one image to the next one after a certain interval, say after two and a
half seconds, we’re going to use the function from vanilla JavaScript setInterval and we want to execute that whenever our component mounts so we’re
gonna create a useEffect hook, we’re gonna add the useEffect hook
which takes a function called the effect function and here is where we’re going
to call setInterval and start updating the index but we need to provide a
second argument of an array of dependencies to determine when this function is
called so we want it to be called when the component mounts, that takes place when we have an empty array, but we also want it to be
called when we update the index so we need to provide a dependency of the
index to indicate that. So now we will create a set interval which takes a
function and in the return is where we’re gonna call set index we want to do
that every two and a half seconds or twenty five hundred milliseconds but
before we add the value to update our index with and state we need to make
sure our interval is cleared to make sure we don’t have multiple intervals
because that could mean that we’re updating the index multiple times we
want to clear it out whenever our component unmount and we do that by
creating a variable that stores a reference to this set interval and we
clear this out when our component unmount by returning a function and in
the return we call clear interval this is just the normal way to clear an
interval that we create and pass a reference in that from that interval
variable so now to update our index we can just get the next element with index
plus one and we should see after two and a half seconds go from the first image
to the second one to the third one however when we get to the last one the
last image in our a index for since we have five images we are trying to get
the fifth and sixth and seventh image and we’re going into this black area so
we need to add a conditional to make sure that this doesn’t happen we cycle
back to the initial image the initial index and we can do that by checking to
see if the index is equal to zero if we’re at its initial value or rather if
the index is the last index in the array for or
can get this value also by taking the images lengths and subtracting one if
we’re at the last index then we want to set it to its initial value and we can
also store the initial value in a variable if you like is that initial
index to 0 pass it in to where we’re executing new state and calling set
index otherwise if we’re not at the last image we want to just call set index and
get the next image like we have been doing previously so now when we are at
the last image in the array we should cycle back to the first one. And now we
have a complete image gallery and carousel made from scratch with React
using Hooks and react-gesture gallery and react-gesture-responder. Thanks so much for watching this video if you’d like more React content be sure
to subscribe. Like this video if you enjoyed / got something out of it. Leave
me a comment if you have any ideas for future React projects like this one. Let
me know what you think about this and I’ll catch you in the next video

17 Replies to “Build an Image Carousel with React in 5 Minutes (incl. Gesture Support, Hooks)”

  • Great video. Can you show a custom video player with controls or a netflix type of carousel with multiple sliding items using React? Thanks 🙂

  • I'm using this on a page with a nav bar and headings above it (the only difference from the code provided is that I exported it at the end and imported it to render on Routes rather than using reactDOM to put it on a .html.erb page). When the page first loads the nav bar and heading are visible, but as soon as the image switches the page focus "jumps" so that the carousel is at the top. You can scroll up to see the heading and nav bar again, but when the image switches again the page jumps again. Anyone have any idea what causes this and/or how to fix it?

  • Do I need the react-gesture-gallery dependency to just have the image slider work? And is there a way I can use imported assets or file paths on my images array?

  • Love this! How can I make info show on click/tap? Either as a pop-up or like a flipping card?

    Don't even need a video. Just point me in the right direction please! 😊

  • Where would I have to insert this if I already have a function called App? Can I just use a slideshow instead of an app? Somehow I'm confused where I can insert the code into an existing website.

    Or lets say I want to export this slideshow and import on index.js how would this work?

  • Thanks for the tutorial.
    I tried your code in a reelle Web page, I noticed that after the last photo, I was directly brought back where is this slider no matter where of the page where I was (example at the foot of the page )

Leave a Reply

Your email address will not be published. Required fields are marked *