Tutorial for Official SwiperJs React Carousel (Swiper Js How To Video)

welcome to this new video in which I will explain how to use the all new official correct swipe a plugin to get started run NP x create react app and at the name of your application let it create your project folder install all the dependencies and then open the folder in your favorite IDE first thing we're going to do is remove all the files we don't need well you're not going to create a PWA so let's remove the serviceworker as well all test files we also do not need logo dot SVG which is just the test object from creator app also we're deleting all CSS files and instead use just one CSS file call it Styles not CSS last but not least we need to remove all the references to those files we just deleted in order to get started our own code we need to remove all the demo code from create react app you now we are ready to try out with a hello world if our application works to do so make sure that all your dependencies are installed by college yarn and then run yarn start if you do not have we are installed install it by typing NPM install - ji-yong as you can see on the left side our hello world application works so let's see how we can install rekt Swiper for application in order to get this done simply run yarn add Swiper as you can see we now have the latest version of react swipe installed which is 6.0 dot - in July 2020 let's go to app Dodger s file and import all the dependencies we need as you can see we were adding Swiper Swiper slide swipe a core as well as the style sheets for Swiper react next we have to remove the hello world markup and add our react fragment as a parent element then add our Swiper containers into the mark-up we give the container an ID and also we need to create a placeholder for the slides which we will create with a for loop in this example we will create a Swiper with five slides each slide has a key which is required by react each slide also has an image in this example we will use a service which is called pixel photos it can provide random images by providing the size of the image you need also we're passing over and an ID to identify each image you let's see if this works by hitting the yawn star script unfortunately we have a small typing error here the path to the CSS file is not absolute instead we just need to reference the library and there you go we have a small carousel which provides a couple of random images which we can swipe from left to right and back let's bring up dev tools here because I would like to show you something as you can see the container for the Swire pet as well as each slide is a div element now in most case this is okay but there are cases in which you want to change this now in our example you want to change this to an unordered list or UL which consists of multiple li elements to change this just give the Swiper a new tag and do the same thing for the Swiper slide as you can see the outside repels now a section then we have an ul and each slide is defined as an Li element let's move on by defining a couple of custom stylesheets to do that open styles dot CSS remove any old code from create react app and add your custom styles in this example we will simply limit the size to 500 pixel width as we were quite constrained in terms of space here also we remove the penny on the left for each Li element if you want you can also use inline styles if you use style sheets or inline Styles that's totally up to you next we want to add an arrow to the left and one to the right to slide through the carousel as well as add some bullets on the bottom to indicate which is the current active slide to do that we simply add navigation and pagination attributes to the Swiper element as you can see on the left we now have those blue arrows but for some reason if you click them it doesn't work also the bullets on the bottom are not visible the reason for this is that we first have to import these features also we have to tell Swiper that we now want to use these features to do that will you swipe a cord dot use at first this might look a little cumbersome but it makes a lot of sense because initially we only load the elements that we really need by using the import statement we add more source code which increases the amount of data that needs to be transferred during page load and therefore decrease performance a little bit so import only what you really need as you can now see on the left side the blue arrows work if you click on them also at the bottom we now have some blue bullets working if you want you can also define the space between slides and also how many slides you want to see perfume Swiper comes with a cup that you can use I'm only going to go through the most important ones here but if you want more there's a very comprehensive documentation for Swiper react on the web in this example we will define three of endlessness one when the swipe is initialized one when the slide changes and one when the end of the carousel has been reached all these event listeners always pass an instant of the Swiper object this gives you a good way to inspect the element and access other properties if needed you can see and console in the left bottom side all the console.log output is printed when you move through each slide if you need additional information go to spy PHAs comm slash API and scroll down all the way to the advanced there's one extremely important thing we have to remember though you might have noticed that on the left side the names of the events are little different compared to those on the right side - once in react start always with the word o n and then a capital letter on the left side you see the name of the events of the original swiper component which is built not for react so always keep in mind used in the name slight change in this example put the both letters O and in front of it and use a capital S as you see in this example okay so we do have a chorus l but they're small stuff we can add for example if you want to add a thumbnail gallery we can do that to do so just create a new Swiper and give it the idea thumbs next we register the on swipe event listener and a sign set thumbs swipe at RIT also since this is just a regular Swiper we have to add a couple of slides now in this case we call them thumbs and we fill them the same way we've done this ball with a four loop you we're almost there but reacts complaining that said stumps wipers not defined this makes sense because we have not imported that so let's do that first we have to import the you state effect took from react also we import the thumbs feature from Swiper next we have to tell Swiper to use thumbs to do that we use again Swiper cord dot use also we have to define our new state we do that by using the used state effect oak we just imported save the code and we should see on the left side the result now the thumbnail gallery has appeared at the bottom but for some reason there's just one image and also when moving on clicking anything on that gallery we don't see a change in our main carousel so let's fix that this is easy to work wrongful to scroll down to the main carousel and tell Swiper they would like to use the thumbs feature next we increase the space between each thumbnail and define three thumbnails for each view now this looks much better doesn't it we can move through the thumbnail carousel and if you click one of those thumbnails the carousel on the top changes as well one thing that definitely looks a bit odd is that the bullet point at the bottom of the upper carousel are slightly outside of its viewport to fix that we simply add a little bit of CSS styles okay now thumbnail gallery works there's the last feature they would like to show you Swiper comes with a built-in feature which is called a controller which lets one cursor control a different one which means whenever you slide through carousel one this slides the carousel to change as well to demonstrate this feature I create another Swiper instance I assign the set controlled Swiper element to the on swipe event listener and then create another set of slides as these will be quite similar to the first ones I simply copy and paste the follow from our first slide carousel to keep things easy I simply rename the array two slides to and I start the array at five to get this to work we have to again import the controller library and tell Swiper call that would like to use this feature pretty much the same way we initiated a new state for the thumbnails we have to do the same thing for new controller slides and voila we have another carousel at the bottom of our page now if we swipe through it we don't see any change yet so what we want is we want to connect this carousel on the top with the one on the bottom so let's do that this is just a quick fix though to realize this just scroll down a little bit to our first slider and assign the controller to its element and there you have it hit save and whenever you change the slide on the top cursor you can also see that the carousel on the bottom also changes automatically one small thing I want to change here is that I want to display a completely different style of image on the bottom carousel to do that I change our for loop to start at 9 and go up to 14 the reason why this works is the Pixum taught photos images start beautiful and click landscape images at id9 if you want to learn more go to swipe HS comm / react that the commentation is quite comprehensive and you should find everything your needs in those files so that's it for this video thanks for watching and happy coding

Channel: Timo Ernst

Views: 80,885

Keywords: swiper, swiperjs, react, official, slider, sliderjs, js, reactjs, tutorial, example, demo, html, css, html5, css3, es6, carousel, swipe, swiperjs.com, Swiper.js

Id: l4kFO6VQPfA

Length: 15min 28sec (928 seconds)

Published: Sun Jul 12 2020