Image Gallery in NextJs Using SwiperJs

hey friends welcome back to the channel in this video I'm going to show you how to create an image slider or an image gallery in react or nextjs using the swiper JS Library we're going to create this slides together where they have navigations and a partial navigation here that shows you how many images you have or what is the current index we're going to also create this one which is with thumbnails where you can control the slider from this thumbnails down or with the navigation and at the end I'm going to also show you how to create this control component where we using functions and react state to control the slider instead of using the navigations now all of this slides or swiper JS in general supports swiping or touch on mobile devices now with that out of the way let's just jump into the code and see how we would go about implementing this I started from a brand new nextjs application by running cre create next app at latest now we're using T CSS in this project just like most of the projects on the channel and I've gone ahead and removed all the bowler plate code that comes out of the box then you install an xjs application running the script so let's start from the layout all I had done here was to add this header component which is showing those links to different pages that we're going to create together on our site so on the homepage let's just open up our page. js6 this is responsible for rendering our homepage which is just this H1 tag now going back to our app directory we can see these slides thumbnails and controlled Pages let's just start from the slides and the page. jsx inside of it which again is responsible for rendering our slides page now to bring in swiper into our application we need to install the package so let's just jump into swiper now swiper JS is a popular library for rendering image sliders or image galleries as we've seen together and they do have a couple of sdks for working with different front-end Frameworks or web components if you wish to be framework agnostic for the Frameworks that actually support web components react asn't quiet uh support web component so we're going to dive into the SDK to install the first thing is to install the package itself let me just make this a bit bigger once you install the package this package is going to give you two components the swiper component and a swiper slide component now the swiper component is the parent is the wrapper and the swiper slide is each individual slide inside of this Carousel now as you can see here I have render this swiper ignore these options that I've passed in here we're going to get to this in a second and then I'm mapping over my images this is coming from my lip so inside of the lip I've created just close this off inside the lip I've created this images file I'm just importing some images that I have publicly I am hosting here uh to create an array of images so I can map over them instead of having to uh pass them one by one to this swiper slides I've created an array of images where I'm mapping over each image and I'm showing a swiper slide for each one now you can pass in some options to this swiper component if you're familiar with the swiper JS Library if you were using it in vanilla JavaScript you can pass in different options to your swiper instance now all of those options are supported as props to this swiper element so if you scroll down in the documentation there is this section where they talk about the props that you can pass into swiper which is basically all the parameters that you can pass into your swiper instance it also has these uh three additional props you can pass in specifically this on swiper which is going to give you an instance of the swiper back for you to reference later on we're going to see this in uh the thumbnails and also the controlled uh version of our slider uh but as you can see here all the props that are available to these components are going to be available as props to the components now the swiper component also supports all the events that is emitted by the swiper instance you can listen to those events in this format of on event name for example for the slide change you would listen to or you would write on slide change prop and provide a function where you can execute or call this function in anytime that this slide changes now going down into the documentation you can see also uh the render function function or props that you can pass into this swiper slide component you also have this use swiper hook which is going to give you the instance of that swiper in any components that's wrapped as a children inside of this swiper main component so you can get this hook to get uh the swiper instance and then call functions and methods on that swiper or get information and properties about what a slides you're on or if what active slide you're on or how many slides do you have uh on that swiper instance this is the same instance that going to be uh available to you if you're calling or if you're passing in this on swiper prop to the swiper component this is the same instance that you can save inside of a react state or ref or you can use the use swiper hook to get a hold of your swiper for example here they're using that swiper and calling the slide next function on it which is going to just uh change the image or change the slide to the next slide now there's also the use swiper slide hook which is going to give you the data about the current swiper slide this is the same as uh this render function that you can pass in so the same information that's available to you here to rendering a specific spe ific uh slide based on uh the state of that specific slide this Hook is going to also give you that same information there's also this slots concept available in the swiper where you can pass in different elements uh to be included inside of your swiper before the container or after the container depending on what slot you're using there are four different slots before start and end of the container start and end of the wrapper where you can just specify by a prop and pass in the name so it will be those components that and elements that you pass in it will be inside of your swiper wrapper now before we continue with the rest of this examples I just want to mention something about the way this swiper instance or element Works swiper comes in with different modules that you can add to your instance for example the navigation which allows us to have this navigation arrows at the beginning and end of our sles or this pagination is a module that you can add to your instance for example here we are adding the navigation and pagination for which not only we have to import them from the modules we have to also import the CSS uh these are different chunks or different modules are separated from each other so if you're not using one module you're not importing it and if you are you have to also import it import it CSS and then when you're ini initializing your component you would also pass in the modules that we want to use here and some of these modules have options you can pass in for example this pagination has this clickable option set to true or the one that I have used on the left hand side which is a type fraction which turns your pagination into this numbers which basically shows the index number of the current active slide compared to how many is the total number of slides now you can read about this different modules and how they work in the documentation but know that any API or or options that you have for your instance you can pass in as props over here now another resource that you can use is this demo section where they're showing different ways you can initialize or different plugins or modules you can add to your slider for example the navigation the pagination using these buttons um making them clickable or having custom paginations or having it as a progress as you can see up top there or a fraction which is what I'm using and each one of these have uh the code as well so if you're using it with react which is the case here you can just click on this react which is going to open up a Sandbox for you where they're showing how they have initialized that specific component the specific options that they have passed and how you can replicate that inside your own code so I'm going to close that going back to where we were in the documentation just to talk about this control component and then we're going to dive inside of our own code so the controller is a module that you can add to your swiper which allows you to connect two swipers together where one would control the other one uh we're going to have a separate module for the thumbnails because it's a similar concept but they do have a separate module for thumbnails where you would pass in a swiper as a thumbnail for the other swiper basically we have two swiper instances in that page and one acts as the thumbnails for the other one you can Implement that using two control components too you can have two V control where both of the swipers can control one another and the thumbnail example that you can see here it also supports some effects so if you uh look at the demos page you can see some effects that's the effects applied when you're changing slides for example you're fading you're turning you're flipping and and whatnot and you can also apply them inside of your react components as separate modules and then pass them inside of here now that's how easy you can implement this in react now let's jump inside of our code so in the first example that we had we're just using a simple swiper with navigation and pagination we mapped over our images to show this slides which was our first page now let's go to the thumbnails let me just close this off go to the thumbnails page page where we also using the thumbnails module to create two instances so here uh first off I'm getting the swiper and Swiper slide from swiper react I'm also bringing in the navigation and thumbnails modules I am getting the proper CSS or corresponding CSS files for them I'm holding a state for my thumbnail swiper because I need to pass that instance now as a thumbnails option to the first swiper so I'm initializing my first swiper here um with some options such as looping looping is when it gets to the end of the last slide it just goes to the beginning space between each slide navigation is just this navigations and then this thumbnail says okay uh pass me the swiper instance that's going to act as the thumbnail for this one now down here I have initialized another swiper instance which is going to act as the thumb thumbnail and I have passed on this on swiper prop to this component which is going to give me back the instance for this swiper I am holding that inside of the state so you can just pass in your state Setter function directly to this on swiper which is going to get the swiper and set the swiper State and up here in this instance I'm just checking to see if I do have uh my swiper instance that's going to act as the thumbnail ready and if it hasn't been destroyed I'm going to pass that as a reference for the swiper for the thumbnail of this swiper if not I'm just going to pass in null now this thing is something you have to check because if you don't it's going to give you an error so you have to not only check that you do have your instance ready and it is not destroyed then pass it otherwise no now one thing side note to mention all of these components are client components because we using react State also swiper JS component or the react components are using react state or react functions under the hood so you need to have client components for this whole thing to work not only this page but also the simple slides so the only difference here in the thumbnails is that we had two swipers and we passed one as the thumbnail for the other therefore when I'm clicking on this bottom uh swiper here which uh by the way has four slides per view as you can see there is four slides per view you can change that to have three slides two slides or 10 slides depending on your use case but clicking on that is going to also control or change the slide on uh the upper slide and also changing the upper slide is going to flip the thumbnails to the active one now the last example which is the controlled version Let me just open this up real quick uh we are initializing just one swiper now I could have used uh that controller module from swiper but what I wanted to show was to get a reference of our swiper and actually call the methods and apis available on that swiper so going back to the documentation for a quick second if you go to the docs and Swiper corei you can see all the properties and methods available to you on the swiper instance you have access to also in the react component so for example if I search for swiper do slide to this is a function that you can call on the swiper instance give it the index that you want to slide to and bunch of other options for the swiper to slide to that specific index that you're providing so I'm using that concept over here now first things first I'm passing in the on swiper prop on this swiper component to get the instance of our swiper I'm saving it inside of my local state now down here I'm just rendering a navigation where I'm mapping over the same images for each one I am rendering a button and I'm passing this onclick event lessener where we're calling the S slide 2 function on this swiper instance that we're storing here uh and passing in the specific index for this image so therefore we can navigate to different images or different slides by clicking on this buttons I thought this would be a useful pattern to just see that you have access to different methods that are available to you on the swiper instance instead of just using the control or the thumbnail version if in case you are rendering something or you wanted to render a menu where you show different images or different options for the user to select so that's all app for this video folks I hope you found it helpful if you have any questions hit me up in the comments like always and I will see you in the next one bye-bye

Channel: Hamed Bahram

Views: 24,319

Keywords:

Id: imhdh4xCh7I

Length: 16min 5sec (965 seconds)

Published: Sat Sep 30 2023