React Bootstrap Carousel. How to use react bootstrap and create a carousel (with source code) 2023

Welcome. In this video I will show you  how to use react-bootstrap carousels.   So, we will implement the similar carousel on the  our in our application. We have simple application   without nothing and it was created with  creat-react-app. The code of this application and   the tutorial you can find in my GitHub .Link will  be under the video in the description. Let's start   first of all we need to install [Music] bootstrap  and react-bootstrap. As you see, simple command.   Let's copy it and in our repository, I am working  in the client folder yarn and react to bootstrap   and bootstrap I use yarn as my main package  manager then you can check does it work or Not by   important button and check does it work or not  so let's try first of all we will open packages   to check packages of the check do we have it we  have bootstrap now inside our application .js we   can import bootstrap from real bootstrap button  we will import button component and let's try new the next important part is Styles as you see  for style sheets we need import bootstrap mean CSS   it's important and crucial one don't forget import  it and now we have button let's check how it works   so and as you see now button is with styles okay  we have button everything works fine The Next Step   what we need we need create carousel let's go  to the components Carousel and we have called   sample let's copy it and try to implement a  new component I will create a new component   slider yes will be and let's copy and paste  this code then we will rename this function   to slider and don't forget export default slider  ah we don't pass any props just import car cell   from real bootstrap Carousel and code from the  sample as you see we have Carousel and we have   Castle items it slides we have three slides  now in our object let's import to slider from slider and now we can replace  this code with our slider okay let's check what do we have as you  see it doesn't work as we expect because of we don't have proper images  refresh as seen on the code sample we had these broken images let's put some images  I have mock Json file with images we will use this   file as the props for slider for Carousel let's  copy images you can use your own images according   to your task but for now we will use this for  the demo purpose okay we have three of them and the last one foreign let's check our page we can refresh and as you see now it works better we have images we have arrows we  have buttons and we have captions   title subtitle so as you see everything works out  of the box pretty simple one so next what I want   to do it's a bit customizing and implementing the  slider in a proper way so what do we need to do   first of all I won't pass some props it will  be slides and inside our car cell we will use   slides map it will be array of dot  datum slide and let's copy item now we will remove these two inside let's put don't forget to put Kim   it will be Slide the image as we have Unique  Images then we have title and subtitle let's put slide title and slide subtitle okay and now we need to pass  these slides to the component where we will take these slides as I  said we have mock Json let's import mob Json and we will pass this slide as props okay let's refresh and as you see we  have Avatar we have description box images are wrong let's check um we forgot to replace image  Source will be Slide the image okay and as you see now it works as  we expected with all the information   the next let's check our documentation  and the latest one as you see also we   have controlled state of the  carousel where we can use where we can control the  slides how it should behave as you see we have on select   function so let's re-implement this Behavior  as you see it pretty simple we will copy use   State import inside our slider then we need  two probes it's active index and on select and we need these functions this code sample  okay and let's console log select the index   selected in there just to check what do we have   now inside the application let's click inspect  console refresh the page and as you see when we   change the item we see selected  index and we can manage it as well   okay also as you see it's pretty responsible  and swipes doesn't work right now but in if   you enable mobile view as you see swipes works  you can swipe images you need the other problem   is with this title and subtitle but you can  easily customize it okay let's do the next how can we change this information on this UI are arrows and buttons we can check  from them documentation also that we can enable   disable fade Behavior we can transition  animation disable everything is described   implemented using different props we  can also set individual item intervals   for this item you can pass interval so in  case you need to set interval you can use example foreign and inside our slider we can for Carousel item set interval Slide the interval okay don't forget commas and now we will have these intervals as you see  black autumn was shifted faster okay next what I   want to show you is customizing this buttons it's  pretty easy as you see all this button buttons   have Styles class names and you can easily um  customize them let's for example create a new slider CSS file and inside we will customize Styles  we need for example I want to use carousel then I want Carousel indicators and I won't change foreign so let's set the wheels 20 pixels right   20 pixels and the Border radius  50 percent then we need the import this CSS inside slider we will import slider CSS and as you see buttons  were changed now we have circles the same with arrows in case you need  to change Arrow as you see we have components hello tags for arrows it's for  previous and the next also in the documentation   you can find the next next icon props and you can  overwrite this button for example you can set for [Music] um for the car so let's put foreign but [Music] with another class name like we changed and now you can in the code click inspect and you see that we have  a new spawn with the class changed   and let's change style for this one carousel unfortuned let's set to background image  background image another one it will be   url url I have my new Arrow it's  SVG downloaded from font awesome right solid and as you see we have another   button so if you need to change the style  of this button you can check [Music] um it's SVG and for SVG we need to change some Style so you can play with customizing CSS but in  general it should be pretty easy and as you see   we implemented this slider almost out of  the box with super simple customization the   same you can Implement for the title and  subtitle in case you need responsiveness   as you see we have all the classes available  out of the box and you can overwrite Styles   as much as you need so all the code  you can find on the GitHub repository   the link will be under the description under the  video as I said before so thank you for watching

Channel: Travels Code

Views: 10,698

Keywords: Travels & Code, TravelsCode, Travels Code, react bootstrap carousel, react-bootstrap-carousel, how to use react bootstrap carousel, How to use react-bootstrap carousel (2023), React Bootstrap Carousel tutorial, carousel react, carousel css, bootstrap carousel, react bootstrap tutorial, react bootstrap carousel indicators, react bootstrap carousel responsive, bootstrap carousel in react js, bootstrap carousel slider, bootstrap carousel tutorial, react-bootstrap, bootstrap-carousel

Id: J2ufEL6tm18

Length: 16min 59sec (1019 seconds)

Published: Mon Jan 30 2023