React Image Slider with Swiper JS from scratch

welcome my web dev friends in this video i'm going to show you how to create a slider in a react app or website using swiper js now swipe already has its own craziness in regular old front end development but then when you actually transition into using swipers how to react it's a whole completely different beast and being able to master how to do sliders is one of the really important parts of front-end web development i mean when i first started i was just like just mastering knowing how to make a slider is just super important inside of any website guys if you like front end development next gs react hit that like button and subscribe to this channel and drop a comment below let's go so in this video i'm going to show how to create a slider using swiper jazz within react we're going to control the slide itself and make it go full screen i'm also going to show you how to change the color of the arrows because that's it has you know i don't don't i have no idea why swiper ships with this funky blue left navigation arrows but for some reason they do apparently they have no designers on the team but they do so want to try to change the colors also i'm going to show you how to change the navigation to custom arrows because that's very common you're gonna do that globally and then also how to do that within a component because it's completely different to do it inside of a css component um one extra bonus stay around for the videos i'm gonna show you how to remove this flicker that is very common if you search it's very common type swiper that when you're navigating there's this flicker that appears a lot i'm going to show you how to remove that as well so let's jump in the computer and get started so this is the slider again here's just a demo of what we're going to do just a regular old slider but what's cool is that once you implement swiper swiper has all these amazing options that you can do such as like show multiple slides and one change the positioning the slide the slides and everything so it's so much to do but this is just the slider so this is what we're going to be building in this tutorial now i have a regular old boilerplate react what you know web page i have globals and i also have a home dot module that's a css module inside of react also have sas so what you want to do is i have sas so i have npm install sas sass which did that just sound right okay hopefully that all right and i actually never said it out loud um but then um so install that npm i sass and install that package um json file it will be right here and then also npm uh i swipers which i already did so you're just going to go ahead and do an mpmi swiper and just hit enter and it's going to install that i also did npm i sass so just do that and then have your modules there okay once that's done we're going to go to a regular old boilerplate react file so i have here regular old react so what we're going to do is um i'm using the xjs but i'm not going to be using anything particularly from nexus inside of this tutorial so you're going to do import use ref because that's going to be something common that we're going to need to make some references inside of the swiper so what we're going to do is we're going to start importing uh the swiper stuff so first thing is we're going to import swiper swiper slide from swiper react okay that's just common this is just again just common old swiper how to import it using swiper react you can find this information in the documentation i'm just showing you to make it easy then what you got to do is import the swiper has its own css files that it comes with it's default and you could always override those so you just want to install those so import swiper and this is again this is related to swiper what you also want to do is now this is where it gets a little confusing they create modules so in order to create a navigation do different effects different things there's things called modules so you want to import that separately and i'm going to import the navigation module and the effects fade which i'll talk about later from swiper then you want to go ahead and import swiper the css for the navigation and css for the effect fade you don't need the effect fade um particularly but i'm going to be using this tutorial later on to show you how to slide as well as fade transition in between the slides so now we have the basic stuff kind of imported again these are extra things right but you're gonna need navigation you're gonna need effect and for some reason swiper just separates it all i don't know why they don't just kind of have it all imported in one it's all in these separate modules that's what confused me in the beginning so you want to do that now we want to go ahead and create just a boilerplate simple old swiper and this comes from the documentation so what we're going to do is just it's swiper okay so opening closing swiper now there's all these attributes that we need to add all the stuff inside of swipers so one are the modules okay these are the modules which are really objects so the first one is navigation and one we're going to use later called effect fade now you don't need the effect fade right away that's an additional module i'll show you how to use that later but and you don't need navigation but we need it for this tutorial so the next thing is you want to import the navigation make sure you have attributes for navigation go ahead and do the effect which right now it's just the default but i'll show you how to override that then we're going to give it the speed object it's going to be oops speed equals and then i'm just going to give it 800 has a speed of 800 these are just regular old attributes that swiper needs then we're going to do slides per view and i'm going to be giving it one i just want one slide per view as i showed you in the demo then we're going to loop you can give it a class name i'm going to give it a custom class name so i can override things later on so i'm just going to call it my swiper so it's going to add a class name called styles.myswiper now we want to include the swiper slide and we're just going to close this right and then we're going to put the image inside here image i'm going to go ahead and use all right let's see what happens if i click save all right so it did something right now again what's cool about swiper is that it doesn't control the css it just gives you the function of content that you can just slide you can technically just put regular old text in here now we have a custom class called my swipe i i also want one for the slide because i'm going to want to custom do things to the okay let's just duplicate this three times and i'm going to change this now from x i have a few images and this is just regular old swiper and it looks funky right because we have no css we have swiper installed right looks ugly but we have the function installed so now we want to go ahead and do some custom navigation not navigation fix these images up so i'm going into my css my sas module file so container is just what i have here it's the root div so that's fine and i have sas so i'm going to work that way so i'm going to nest so my swiper and then i'm going to do swiper slide the first thing is i want my swiper to be width of 100 i don't want to go past the page all right so now see now what it did to the images now it's not like going across like that and that's the flicker that i was telling you about that is very common is particularly safari and even chrome related to swiper we'll fix that later but now we have this now we want to fix the slide images so that they don't expand you want to control these images so we're going to do image so with 100 and then we're going to do height 100 and now we're going to do object fit cover and save hopefully we did this right okay oh i get so excited when we do this right guys we did this which is good um all right so you can see here now this is default swiper so it's actually working so phase one we got we got it working now obviously there's a few things the arrows look funky you can see the size of the images one is off one is larger that's because we didn't fully control swiper we're just using default swiper and it's showing the image in its own aspect ratio okay but what we can do now is control the size of the containing swiper and then have those go full screen so for example if on my swiper we change this to height let's say 80vh just so we can see something now you see here i'm controlling this the swiper slide images are all filling the swiper so if we go 100 vh we can have a full screen swiper and this was the original demo that i was showing you earlier and that's it and that's pretty much this that's we did you know we didn't do too much work here and we have a working slider i mean one of the most important parts of your career is bringing these sliders who would have known the next step is how do we make a fade so let's let me show you the effect fade now originally in the documentation they don't show you the effect this is this is like an additional module so in that case we added the module here effect fade we added it as a module inside the swiper and now we need to add it here on the effect you have to say effect be a string here so this is going to say fade and if i did this right i'm gonna refresh and here we are okay i just say these sometimes these are the hard refresh hot reload doesn't work so now we just have the fade so this is cool so by default swiper is going to slide when you add the effect fade and then now what's cool is they have they have a bunch of other transitions you can use but the problem not the problem but it's a little tedious you have to add these modules every time you choose something else you got the navigation let's change this ugly blue color into this white so what we could do is go to the global.css oh i actually had it here i'm hidden so this is if you want to do it globally and shortly i'm going to show you how to do it inside of the module file in case you don't want to affect you know all the sliders across everything but this is pretty easy and in in vanilla swiper on front-end development without react this is actually more complicated i think they actually improve this so now you could just say color white and i believe you need the important let me see if i remove the important if it still works yeah you need you need the important to override it this is almost good enough i mean you don't really need to change these i do want to show you because i know if you're doing any front end development like you don't always want to use these arrows like sometimes you know designers make really cool arrows so i'll show you how to do that next but this is pretty good right just being just get rid of that blue color was a huge deal i remember when i first learned this i was like i could not change that blue color and i was like guys we are going to launch a slider with this ugly blue color i don't care what you say because i don't know how to fix it but no so um now we actually are going to change the background of this arrow and include our own custom one so we need to say swiper button next we need to just give it a background repeat background size contain background position center no repeat the next step is we need to change the after sudo element to display none because that is what shows the arrows so we want to we don't want to show anything so if we hit save these should go away oh there they are so they went away so we stripped away the default arrows now i can now that i'm basically saying i want you to use my css i want to change the background image of those arrows now i can identify and say hey use this image arrow left i have a png left arrow if i click save this should work there it does have a really thin nice thin arrow designer design which is very nice might be a little too subtle but you know this was one that we had and then for the next one we could just change the background image to one that we have next and now it's all still working no changes you have all the swiper working left right and now you have custom arrows right that is like a huge deal because i tell you now this is kind of enough because probably on a website you're going to change the arrows across the website but i want to show you how to do it in the component itself because you don't always want to touch the global file let's hide this and let's go back to the default right now we're going to make a used wrap for each so i'm going to make swipe or nav um name this whatever you want it's my own reference we need to create a ref identification for each and now i need to create those elements i'm just copying and pasting some stuff i had i don't want to waste too much time rewriting everything if you look here so all we're doing is now we are manually creating creating these elements and we're saying i i need them to be identified with this ref because we want to do something with that we want to tell swiper to use these and i'm also giving it a custom css class that i'm going to be using inside my module this is the default so if i hide this guy right that's the default this goes away now we want to tell swiper use these two random elements i made to be the function of the left and right pretty you know simple i again copying and pasting here just to save time and this is again from the documentation click save now technically behind the scenes this is working but you don't see it because now that we have these totally custom elements think about it before i answer why can you not see it because we didn't give this any css yet this all out but just to save time i'm going to just paste it here and walk you through what it is all we're doing here is telling it since this is invisible we need to give it a width and we need to give it a height i'm positioning them both absolute getting them centered vertically on the page giving them a cursor pointer giving it the same background repeat that we had on the global files giving them the same and saying hey for the swipe or nav previews i want you to go on the left position left and i want you to use this arrow left and for the swiper nav next right element i want you to go on the right g so let's save here and let me hit a refresh okay there it is actually when you click here something's not right but swiping works here so here's where the annoying things come from you have to start googling going crazy to figure stuff out so here's like a little nuanced strange thing inside of when you create custom elements inside of the module you click here this wasn't working now all the code is correct problem is there's some issue on um initiation so i have this code and you can just copy this it's in the docs as well but when this initiates um you need to tell swiper to update this navigation this particular issue with navigation and some of these elements that on initiation don't catch and then if you click save that should pretty much fix that issue so now all the custom elements work now if you don't you know use this custom inside of the module you won't run into this issue necessarily you could just use the global one but it's important to know these things because if you start doing more customizations you're going to run into these things so this is an important um code block that you need to add inside of your swiper as an outro so now the next thing i want to show you is get rid of this one flicker this is just a bonus and also how do you map over this so you don't have to add additional slides there it is you see that flicker so now what we have to do is i need to add this transform translate z to zero because i it's just crazy that this fixes it i don't know why swiper doesn't have this fix but adding this should and if anyone knows anything else or doesn't hopefully it continues to work but for now it gets rid of that flicker let's do one last thing for this video which is let's map over photos and let's just do it manually so all we have to do is create an array a const called cons photos and i'm just going to make an array and i'm just going to make it with a series of strings with the image name which i have so we just have um an array of photos here and let me just hide these guys all right so i want to map over this we're just using um the map method so photos.map we're going to map over the array we're using the arrow function here and then we're going to bring this over if we map over this i got no errors meaning it works but now i just mapping over so what you need to do is now change this into into an object custom the custom image from the use the variable called photo and we need to say to string because we want to convert this to a string and oh we got it so now we have a regular old swiper and now we have these dynamically being created if this was coming from a cms or also just to make it easy now we just have these photos listed in array we don't have to write all the swiper slides in case we want to make additional things we have to do multiple times so that's that's great is there anything else here i think this covers everything um all right guys i i mean is there anything else i don't know drop the comments below hopefully this tutorial wasn't too long but i wanted to kind of show you all these ins and outs of swiper and how to use them how to use it and react i think that covers everything guys if you guys are interested in front end development um nextgs react uh full stack development just hit that like button subscribe i'll see in the comments below alright guys enjoy and i'll see you next one

Channel: Digital CEO

Views: 18,913

Keywords: react, react js, react image slider, react carousel, react slider, swiper js react, react swiper js

Id: 4aJPgKLwAGY

Length: 17min 21sec (1041 seconds)

Published: Wed Mar 23 2022