SwiperJS. React swiper js. How to use react-swiperjs and create a carousel (with source code) 2023

in this video I will show you how to create Carousel with swiper jazz swiper just a really popular library to create sliders or swipers or carousels as you see it has more than 33 000 of stars on the GitHub and it's available for react solid swelt View and glow okay let's start we will create a simple Carousel based on the create react Up application I created this application I removed all boilerplate code and we have only up component with div up as you see nothing else okay let's start we will use react version and first of all we need install swiper as all packages for react angle are available under the swiper Main Library so inside our code we need yarn add swiper I'm using QR as the main package manager also all the code sample code samples you can find on the GitHub my GitHub the link will be under the video in the description okay we need the follow the documentation it's my recommendation always try to follow the menu documentation on the site original official site we need import swiper swiper slide from swiper react and we need styles for this swiper so let's do it step by step inside our client I'm working on the client folder objects we import swiper and we need import styles the next we need return swiper with slides let's replace our view with this wiper remove these dots and what we have by default right now we have three three slides per view space between them 50 pixels and we have events on slight change and on swiper where we will have some information when we swipe sliders okay let's check our application and first of all as you see we don't we can't resolve swiper CSS let's check why let's go to node and inside we will find swiper and as you see we don't have swiper CSS there is no folder CSS and files if we will check packages on you will find for exports for CSS we need to export this fiber mean CSS it's this one under this Viper source file okay if it doesn't work we import just swiper mean CSS and it will work now let's refresh the page and as you see it works we have three slides per page we can customize for two for example just to check how it works yep it works okay the next I want to add some sync more visible and usable I have mock Json with the images I want to show and some title subtitles again inside our objects let's do the next we will create a new component it will be slider jazz export const slider and we will move everything could be held from the objects here it's more much more better approach and with styles okay and now inside application up file let's import from a slider slider component and we have this component now let's check how it works it works okay the next one we need pass some slides as I said we will use mock Json so let's import slides from MOG Json and let's pass this slides as a props slides right now we don't have these props let's add it and now inside swiper.js we will do the next let's go slide snap slide and we want to Output this slide between the slide team slide image as we I have images images are unique so let's put the EMG source Slide the image alt don't forget it will dislike the title now okay basically it works we have three three slides and but we need some styles for image we can set for example 100 pixels and in this case images will not won't be caught so let's add some for example let's put under the up yep for example I want to all image [Music] up image with 100 percent foreign gym okay now we have our images slider works fine the knife according to the documentation you can see that we have a lot of different models for example it's navigation pagination arrows and in case we want to extend our application we can add the models navigation pagination scroll bar and accessibility a11y let's add these models inside our slider we want knob here models then we will import them from the swiper as you see it's from the main library not from the swiper react we have these models and then we need enable them so we need pagination navigation pagination scroll bar props let's add them and the next important part we need the styles for each model where we will find them in sites file swiper we have models and for each module for example pagination we have a pagination mean CSS so we can import specific model we want but to save our time not the file size we can import swiper bundle mean CSS and inside this bundle we will have all styles for all models bundle bundle mean CSS and all styles will be available out of the box let's check so after refresh as you see we have buttons we have arrows and we even have this slider we can swipe so everything is out of the box what's the benefit of this model this swiper library that you can configure how many slides you want to see on the page before because of for example if you used bootstrap carousel there is no possibility to configure how many slides you want to see on the page so with this one it's a great benefit also important notice when you're using some Library you can open GitHub and check issues how many issues are opened and how often they are closed just to be sure that this library is up to date somebody works on it and you are not using some Legacy okay so basically this Carousel is done also if you will open any component of the slider you will see that there is a special clause for example swiper button priv or next so using this class name you can easily configure UI of the component foreign customize your slider also what I want to show you according to the documentation there are a lot of additional Styles and configs you can use from the behavior you can use hooks use Fiber and any other component on the your site can manage your slider you can call slide next slide previews also they use samples how to use UI effects for example if you will go to effect demo page you will see for example this one you can swipe also you can find the code sample foreign so we have images we need the effect group also we need Cuba effect props parameters don't forget about effect coog for let's import it from the swiper let's add it and as you see works great okay so basically it's that's it now you can see how to use this library to create awesome Carousel for your site really it's it has a lot of options possibilities and you can configure your slider as much as you need so thank you for watching subscribe to my channel and have a good day bye

Channel: Travels Code

Views: 73,218

Keywords: Travels & Code, TravelsCode, Travels Code, react swiper, react-swiper, how to use react swiper js, react swiper carousel, How to use react-swiper js (2023), React Swiper Slider tutorial, carousel react, react player, carousel css, SwiperJS, swiper js, swiper js react, swiper js react tutorial, swiper js slider, swiper js html, react swiper slider, react swiper js responsive, react swiper js autoplay, react js swiper slider

Id: KL_yIf5uiJo

Length: 15min 10sec (910 seconds)

Published: Wed Feb 01 2023