React slick. How to use react-slick and create a carousel (with source code) 2022

welcome in this tutorial I will show you how to install and use react Sleek it's one of the most popular library to implement Implement Carousel with react as you see it has 11 Stars on the GitHub we can check and more than 65 million downloads almost 11k Stars okay so how to use it with react we will use within simple react application now it's empty let's take a look what do we have inside I created it with the create locked up in tools and put in client folder you can find all source files in the GitHub the link will be in comments in the description for this video and don't forget to subscribe on my YouTube channel if you like this tutorial so we have only up thank you let's check in Source we have integers as usual react don't render and the application comp up component and inside is nothing we only want CSS with nothing okay now let's move let's go to the documentation and try to do what we need first of all don't forget you need to check the documentation and the installation how do you need to install it so first of all let's yarn add react Sleek we need this library and start use it okay let's yarn add react sleep and the next what one what is important as you see we need CSS for this here and to get this CSS we need install Sleek Carousel it's jQuery library at least it has as you see a pure dependency on jQuery and it has the best case and usually you don't need it into your projects so how you will solve the issue first of all let's drive without it and what we need we need to create a new component and just put the same sample okay let's create a simple slider component so we have this Library okay let's go to the components I create a folder components and now we have only movie card but it's for the next example now we will create a new Broad New component and let's call it a it will be functional component what do we need from the sample we need settings let's copy these settings and then we will check what do we have and then we need to return this structure we need the slider we will skip this title we need slider component from the relax leak and the repairs settings it's just object with the props super simple customization and inside is the div each children will be a slide slide element so let's put these six items now we need slider okay we have everything what do we need in the settings we have those true in this case we will have these dots then we have infinite true it means that we will scroll through the cycle then speed you can customize it and we need to show slides to show it will be one slide per screen and the slides to scroll is the same one and we want to scroll on the one slide okay now let's check inside the application we need a import simple slider and let's put it here okay let's check what do we have okay as you see we have some Behavior but we don't have styles okay now we will fix the issue with installation slick carousel young and and then we will use this to CSS files okay we have now let's go to simple slider and import these styles okay what do we have okay we need change URL okay as you see we have dots and we have slider foreign works we import it from the Slick Carousel library from node.js not models here so in package Json in peer dependency vcg query is not what we need but anyway now we can solve the issues next wave let's go to simple cursor again and we will create two CSS files private let's go to this CSS file Contour command a copy and paste it here now we don't need from the library in general and this one slick scene the same copy and we create a new file and paste it here now in JS file you can don't import these files and then in package from packages soon you can remove slick carousel or yarn remove slick Arrow cell you will delete it and now you want to have the problem with the pure dependency with jQuery okay let's wait for a second foreign you can easily delete everything what you don't need also we have in we import new phones it's for Sleek you can remove it as well or customize it to the one you need so let's just removed and remove all font family with this leak we can remove it or you can use anything you need according to your style and the design now as you see we we have dots we need increase size but everything else works fine and we have this carousel UI now we can dots increase size let's check for example here let's put a bit bigger so now as you see we have it okay the next one what I want to show you let's change a bit because the music let's put some images or let's put something else with a more interesting approach let's move movie Cars I created a movie Corp I use the material UI for the customization of UI but nothing complex you can install material UI and use this card what do we need we need pass a movie with three Fields it's image title and release date and we will have some card okay now let's put this card also I have MOG and Json with the data we need okay let's go to simple Carousel and um use so we have Dayton and now we need to implement this approach let's remove all these empty deals and now we need um data map so we have movie and we need the render movie card let's import it's important default so we have movie called and now we need the output movie okay this way let's check okay let's install one more feature we need yeah add the motion react and now emotions dialed foreign movie cards okay now we can customize it a bit so now it looks better okay and as you see we can swipe it now let's put a few images in one row inside our simple slick we can slice to show let's put for for example and the info for example slide to scroll for as well now we have less dots and as you see it works pretty simple and easy the next what we can do it's change something with resize when we resize the page as you see it looks not the best inside documentation we always can check examples and I would recommend it to users and we have responsive section inside the sponsor we can see breakpoints with different approach let's copy this section responsive and what do we need we will show another number of slides it depends on the breakpoint let's check okay let's resize reload the page now as you see we have three two and one okay as you see it works pretty fine so don't forget to check the latest documentation with all the samples you need and you will see that you can customize this Carousel as much as you need one more what I want to show you it's one bug that is inside the reacts leak for example let's um Doom the next inside up Jazz I want to show the list of movies and when I click the movie I scroll scroll to this movie uh okay foreign so let's put for example H2 now with title don't forget about key to move in ID and you'll need index okay now the next approach when I have um when I click for example summary I want to show I want to show the this specific movie so I will use the next one let's import new state and inside the so the first index will be zero and it will be initial slide selected movies now when we will go to the simple slider initial slide we will use it as a check from them from the docs we will have initial slide we can configure which slide will be the first one let's copy it and use it inside the settings initial Slide by default it will be zero and now inside objects in case even minus one and inside selected movies is not minus one then we will output our slider okay now we don't have slider but now we can click any movie let's do it and on click it will be function where we need set selected movie index now for example when we click a door we should see the first door and when we scroll we should see everything code we need now what the bug we have let's go to the simple slider and the infinite set false let's check the issue so let's for example click Avatar we have it and when we scroll it works fine in case you have slides to show four let's put one we need remove responsive part for now for example let's click Avatar as you see we have Avatar it's almost in the end then let's scroll and as you see we scroll to the beginning and then everything works fine let's refresh the patient check again for example Top Gun you have Top Gun you won't swipe one right but you are on the beginning it's a well-known issue with this library and there is a fix you will find this fix inside the code and the comments as well so it's a incorrect behaviors when we have infinite force and the initial slide is not zero so as you see there is no solution right now but we can copy this quick fix and use it let's go to simple slider again so what do we need we need to use State hook and we need use effect use effect then we have slider so we create const slider use not effect it's uh user app so the user if we need to and inside the so it's not typescript so we need the add reference slider so now we have reference to the slider and inside this application this use effect we will manually initial slide position just rename it with initial slide and we will manually handle this Behavior let's check inside the application we have Top Gun for example let's wipe one left it works fine let's refresher page Top Gun let's swipe right one and it works fine so as you see we fixed the issue and in general we have a great looking Library you can use inside your application so if you like this tutorial subscribe and put the like for the video and thank you for watching

Channel: Travels Code

Views: 45,974

Keywords: Travels & Code, TravelsCode, Travels Code, react slick, react-slick, how to use react slick, react slick carousel, How to use react-slick (2022), React Slick Slider tutorial, carousel react, react player, carousel css

Id: 8kbS2WEZieU

Length: 24min 50sec (1490 seconds)

Published: Tue Sep 27 2022