Carousel in React with react-responsive-carousel

and welcome back to this series awesome react components so guys I'm back again with another awesome react component that is react responsive Cruiser so guys this package is an awesome package if you want to implement crousle effect or browser feature on your website so as you can see here these are the cruiser effect that you can Implement with the help of this package so as you can see here this is the crouser and inside this you can see there are sliders and you can click on them and image is sliding after that you can see the thumbnails on the bottom here and you can see the button left right button here slider button and after that you can see the stats of which slide which is currently on so as there are many features inside this package like you can set it to Vertical Cruiser if you want to see here so if you scroll it then you can see here it is going upward and it is going to repeat again with the help of this infinite Loop feature and guys you can implement this feature with the help of this package very easily and within very short time so now I'm going to show you how you can use this inside your own project for that I'm going to create a new project or new react application on the course and works you can create a react application or use inside your existing react application so for example I'm going to create this new project and inside this project you can see here this is the page right now so I am going to remove it and guys you can install this project with the help of this command npm I react responsive corozal but I am going to just copy this Project's name and I'm going to paste inside this dependency in the code sandbox so it is going to install similarly as this command after that I can import that component import Corral cell from the react responsive browser so just copy and paste inside your component after that we also have to import this CSS from this Library so just copy this code from here and paste inside your application so guys now you can use this component inside your application cross cell and also I have to close this inside this we can pass children's for example any divs or HTML components and guys for this demo I am going to use images from the honest Flash and I can get URL of the images with the help of this API that is called as the lorem pixel or pick some photos and on the bottom you can see here these are the URLs of the images or you can fetch multiple images with the help of this API and this API is going to return the links and details about those images and let's copy some images from here and for now I'm going to copy six to seven images from here and this is going to be the data for the images which we are going to render now so let's create a variable here images and inside this area I'm going to paste that Json for the images and guys as you can see here in the data of these images we have ID of the image author name height and width of the image and URL and you download URL and now we are going to use this download URL to show the images inside our application so as if you know you can use the map function to render multiple images from this variable so I am going to write images dot map and for each image I am going to render end image tag and let's close it also and in the source we have to pass the download URL of this image and in the alt we can pass anything like author name so guys as you can see here these are the images showing in my application so let's open it in the new window and as you can see here these are the images showing right now but this is not yet working because so we have to write Corral cell and the C should be Capital here and now it is going to work fine so let's see and this is how it looks now you can see there are sliders and there are also button here which you can use to slide this so guys it is looking very big right now so let's do some styling here and we're going to pass a class name here and class names can be crsl and now I'm going to start with the help of css3 RSL and let's make it appear in the smaller window width is equal to let's set 400 pixel by default it is responsive guys and if you are going to set the size it is not going to be responsive so we have to make sure that we make this div responsive or we can wrap this component inside another div and make that responsive so for now I'm going to just go with it and we have to center it with the help of margin Auto now it is going to be centered so guys as you can see here this is how you can use this corruptional component but there are many probes that you can utilize to make it we have differently like you can pass Pros like this so I am going to pass this auto play so let's pass it so as you can see here this is going to Auto slide and after that it is going to stop at the end but if you want to make it Loop infinitely then we can pass infinite Loop and it is going to Loop infinitely and let's try to use another prop that is that is Central mode so guys if you use Center mode then it is going to Center the focus image in the between and two images are going to be shown on the both side which is going to appear next or previous and guys to customize it more we can use another props for example you can use this interval to set the number of milliseconds it has to wait for sliding the next image it is currently sliding after three seconds but you can set it to any other number so let's set it interval and for example I am going to set it per second with the help of this thousand and now you can see it is going to slide faster similarly guys there are other props and you can use this Pros to make it behave however you like for example whenever you click on these images and if you want to open this image or any other page then you can do that with the help of this function callback functions that is on click on click item or click thumb thumb is for this thumbnails and there are many like this so guys by default the width of the cruiser was 100 that's why it was showing the whole page and you can also customize the width if you don't want to use this from the CSS you can set it by default inside this browser width is equal to 400 and now it is going to show that in the 400 pixels but for now let's leave it to the CSS because we can style it however we want with the help of CSS and guys if you want to know what are those props and how can use this then you can come to this demo website and have a look at them by just checking these here so for example if I want to know about the infinite Loop then you can uncheck this and it is going to stop infinite Loop and if you want to know about how what this swipe cable works then you can just uncheck and it is going to be unswipable and if you just check it again you can swap these so guys there are many pros and it is not possible to show all of them in a single video so you can explore it yourself and come to this website and play around with these props by just checking around checking them so guys that's it for this video I hope you like this video If you like this video then don't forget to subscribe this channel stay healthy keep coding and keep watching tutoring

Channel: Tutorend

Views: 10,457

Keywords: react image carousel, react carousel, react image slider, web development

Id: VFHWuy2olto

Length: 8min 10sec (490 seconds)

Published: Mon Jul 10 2023