bootstrap multiItem carousel in react with react-slick(2021)

hi there this is welcome to my channel nominee technical in the last video we saw how to make this flipkart multi-item carousel right and coming to this video we are going to see how to make this bootstrap multi-item carousel from our existing flipkart carousel so without any delay let's start back to my vs code so make sure your direct server is already up and running so just expand your source folder and what i'll do is i'll just create a new component for this so just come over here and click on this and i'll just say as bootstrap multi dot js and i will also create a css file for this so just again click on that and i will give the same name that is a bootstrap multi dot css and actually the code will be almost similar to that which we saw in the previous video so that's why if you didn't watch that video do watch it and then come to here so what i'll do is now just get into multi carousel.js and just press ctrl a ctrl c and i'll just close this file and come to bootstrap multi.js now just press ctrl v now here we have to change a couple of things right so first of all we don't want this carousel.css but instead we want a bootstrap multi.css which we have created just now so i'm sorry so uh just clear this carousel and what we'll do is just press window v so i already copied this right so that's it uh bootstrap.slash bootstrap.css and uh just press ctrl save now uh i also want to change the this component name so that's why just come over here and just press ctrl d in order to select all the instances and just press ctrl v okay bootstrap multi carousel okay that's pretty much it now just press ctrl save now let us use this in our app js right so just copy this name come over to app.js and i'll just paste over here now let's import this okay what to do for importing just press ctrl space bar it will auto suggest us and then click enter see it will automatically import right now just press ctrl save now we don't want this app js anymore so that's why i'll just close it okay now come back to our browser actually let us see what is going on so once refresh your browser okay just scroll down a little bit see if you observe here uh if we we already removed that carousel.css but still we are getting the style right so uh the first so just come over here objects and okay just uh command this carousel and multi item carousel now just press ctrl save see sometimes it happens like that so as we are as we are importing uh uh carousel css in our multi-item carousel and carousel and we are importing this in our app.js so that's why those styles are applying right so just do command this okay so so that the styles will not be used on this bootstrap multi.js so now let's start editing right so uh see now the uh icons are going to the last and we are also getting this horizontal scroll bar right so let's figure this out and make it look like this okay so the first thing is what i'll do is i'll just come over here and uh i'll just give a border to this okay so that we can figure out actually what we are working on so i'll just say border of one pixel solid green so just press ctrl s save and uh if you observe carefully on this bootstrap multi-item colors you'll see this carousel is not occupying the total width right see see here we are having some empty gap and here also we are having some empty gap so that means it is not occupying the total width whereas in our case it is occupying the total width right so first let us figure this out right okay so for that what i'll do is just come over here and okay just remove this we don't want this margin anymore so now just say style equal to and the width of we only want 80 percent of the width right but and we don't want this h1 anymore so but width of 80 percent but whose width of 80 percent we have to so for that we have to take another that is we have to surround this by another container okay so and now just press ctrl save come back to your browser see now it is taking only 80 percent of the width right but we want it to be centered right so for that just come over here and just type in style equal to display offer i'll just say it as a flex and we want it to be center right i'm sorry so just type in justify yeah justify content center okay now just press ctrl save now it should be centered see now it is center right now uh let us start with the buttons okay first first we will complete with buttons and then we will come to this card okay so if you observe here buttons first of all these buttons are small and this something is like yellow color right so first let's figure out that so for that we have to get into css file right so we already know how to target the button right that is a dot slick preview and dot select next right so if you didn't remember data just uh get into your carousel.css assign you can just copy these class names okay instead i'll copy this whole style uh it will be almost same so that's why i'll just copy that style now just press ctrl v and first thing is we don't want this much height and width we want it to be square shape that is a 40 pixel and 40 pixel i know we don't want this box shadow anymore and we want it to be something it is like something yellow color right so i already copied that color actually so uh it is uh this color so the yellowish color oh now just press ctrl s save see now that is now that we are getting that color right but we also want some border radius around this and if you observe carefully we are able to see the predefined buttons right we don't want this buttons to be appear so for that we already saw in the previous video that is we have to use this right so we have to uh display none on before so just paste over here and we also want some border radius so that's why just type in border radius and let's say it has 50 pixel and okay now it's gone right now it's gone and we want this icon to be of white color and these are spaced a bit from our carousel right so first of all we want that color to be white right so i'll just close this so here we defined it as blue so that's why it is blue so just type in white and this is for the next right i'm sorry for the previous right so just copy here as well for the next button now just press ctrl s save now it should be white right see now it is white and now we should space it right that is we should move that from the carousel for that just copy this for the slick preview that is on the left side just say left of minus 50 pixel as i said position absolute is already given behind the scene so just uh we should adjust by giving some left and right okay so now just press alt shift down to copy the same i initiate off pre we want it to be next right so it is on the right side so just say right or for minus 50 pixel now just press ctrl save and back to our browser see now these are a bit space right okay now the buttons styling of buttons is being finished for but first of all i just want to give some margin top to this so that we can see properly so i'll just say nothing top of say 50 no problem at all no i no need of giving pixel also it will work fine okay it will apply see now it is okay now let's start editing this card component right this is our card component right so first thing is we want uh we want first thing is we want this uh favorite icon or something and then we have image and then we have something stars like and then we also have a button right so but whereas here we don't have any uh favorite icon like that and this image is also we should decrease the size of our image right so let's do that okay so first thing is we have to edit our card component right so okay now uh first thing we have to decrease the size of our image so i'll just say it as a 120 pixel and if you observe carefully our images are sticking to each other whereas in this case there is a space between this right so i'll just say margin of 20 pixel and we also want that favorite uh icon right so just come over here and just take i'll just take a span tag and inside that that icon name is favor right okay favorite see we already uh installed material ui icons right for icon so that's why we are using uh that icons only so that is called a favorite oh why it is not all suggesting is it's like something favorite or something like that so okay let's do that favorite border so just press ctrl space bar okay it is not auto suggesting us so we should just go to our browser and just type in material ui icons metal ui icons okay this link don't worry guys i'll provide this link in the description so if you don't if you do not that is if our vs code is not supporting that is it will not other suggesting or if you if you fall any in like if you're facing any difficulty just come over to this link and just search okay see we want to favorite something like that or see here we want this icon that is a favorite border right so just copy this import statement and come back to our vs code so just paste it over here and we want to use this right favorite border icon so instead of this just paste that name okay okay now just press ctrl s save now no need of this anymore so once refresh your browser see now these are these are being spaced right now our image is also a bit decrease and we are also getting that favorite right but this favorite is on the right side right see here it on the right side and the color is also something like it is like light gray right like gray or light gray so for that uh first of all let us change the color of it right so in order to change any uh metal ui icon color you can just pass it in the inline style right so just saying uh style by just passing style attribute and you can pass your wish color right so i'll just say it as gray and we want it to be aligned on the right right so just uh give a style a little bit to that and just say float off right so what this will do is this will uh take icon to the on the right side okay see now it is on the right side right but we also uh want some padding right see uh it is sticking to the our borders right so let's apply some padding as well to our outermost container so just say padding we only want on the left and right right we don't want on the top and bottom so i'll just give 0 pixel on the top and bottom and 10 pixel on the left and right right so now just press ctrl save see now it is some water okay looking okay right okay now we completed our border and image style is also being finished now if you observe carefully our width that is our container width is something less lesser than this right so uh let's increase the content let's increase the size a bit [Music] so what i'll do is if you change if you change over here it will uh like it will affect the image right so that's why what i'll do is as we already passed width of 80 percent that means it will occupy the width given to this outer container right so what i'll do is i'll just say width of 220 okay that means 220 pixels so this will uh this image will automatically as we give 100 weight this will automatically take this whole 220 pixel width right so now just come see now it is uh okay now it is space right now it is occupying the width but these are sticking to each other right so we can figure out this see here if you observe carefully we have only four products but whereas in our case we have five products right so that's why these are sticking to each other so what we'll do is we know that right if you are following this tutorial thoroughly you will know how to figure it out right so how yeah you guessed it right so just to come over to here and just say slides to show of 4 instead of 5 see now it is looking good right now now everything is figured out that is this we got the spacing we got a favorite icon and we are also our image is also occupying up with somewhat uh better width right okay now everything is finished now we want this right so we want this star rating right so in order to get that star rating we uh we have to install another library that is a material ui lab okay it is uh given by the material ui itself but we have to install it right so you make sure i install this material ui lab okay material ui slab so just make sure you install it so now back to our bootstrap multi and where we want to show the rating we want to show the rating over here right uh let me cross check first we okay first we have this uh uh that is the name of it and then we have the rating right that means we should show over here right so under the top training tvs it's over here okay now here we have to uh show that rating right so it is uh just a rating component we have to uh we have to import it okay so just say rating see it is auto suggesting us see from the metal ui lab and rating and rating okay so uh just import it okay and self close it now just press ctrl save actually why we are getting this red lines this expression must have one parent element okay i think it's my laptop problem see now we got the rating right see and these are dynamic okay and these are not these are not like this okay see if you overrun this nothing is happening right but whereas in our case this is dynamic right and see if you observe over here whenever you are hovering on that we are not getting like a half star right so as soon as you hover on that we are getting a full star rating but what if you want to give 0.5 like 4.5 3.5 like that you can just pass a prop called precision okay so just come over here and just say precision equal to 0.5 and we also want to decrease the size of it so we can also prop pass a prop called the size and it accepts uh small small okay and it accepts a prop called small if you hover over this i think it should show uh so if your laptop is pretty fast it will uh see now this accepts a prop called small medium and large but we want only small right okay now just press ctrl save see now now the size is a little bit less and see now if you observe we are getting up half star also right see okay uh this is with the star sign then uh we want to show something like this okay this cost right so we want to show two costs okay one is uh one one is the original cast that is the strike dot finder i think this is the offer cost right so but whereas in our case we only have a single cost so so what i'll do is that is this one right so i'll just clear this off and we don't want this styles anymore so we we want to show two calls right but we want to show them side by side so i'll just take two span tags okay so uh just say span star 2 and just press enter or tab it will create two span tags for us now in the first span deck we want that is offer cost right so i'll just say 7071 actually this should be this should be greater right so this should be greater than this price okay so seven zero seven is seven one seven zero greater than seven zero seven okay let it be nothing will happen and we want to uh we want to uh uh that is we want to strike it right so we can do that with the help of text decoration text decoration that is a line through okay so line t h r o u g h line through and the color is something it is like gray so that's why i'll just say it as a gray and we want the same for this also so i'll just paste over here but we don't want this anymore we don't want this text declaration okay so now just press ctrl save okay okay we forgot one main thing that is a dollar symbol so just come over here and just place or dollar symbol over here and here as well okay now just press ctrl save okay now we are getting dollar symbol right okay but if you observe over here uh this cost is uh uh that is a font weight somewhat less and for this is the font weight is somewhat more and these are a bit space right so what i'll do is i'll just come over here and just say margin right off uh i'll just say seven pixel number of giving pixel anymore again so uh and i'll say font weight as a font weight i'll just say it as 300 and here i'll just say font weight answer we want uh a larger phone pad over here that is i'll just say it as a 700 now just press ctrl save now everything should be figured right see now we got a spacing between them and this is a less font and we have uh this on the more phone right and uh now we have to deal with this button right so we want a button as well but we have here some text right so we don't want this p tag anymore instead we want button right so just type in button and the text is something like add to cart or something okay now we have to style this as well so just press ctrl s save come back to your css file so for button so uh these are some of the styles you should definitely write in whenever you are using browser sorry whenever you are using button that is a outline i'm sorry outline to be none and border to be none and the color we want is let me cross check so here uh the color is something like yellow and the background is white right okay the color is something like yellow and that yellow is that yellow is this color and then somewhat light yellow and the background color is white right background color is white and if you observe carefully we also have some border radius so i'll just say it has 20 pixel and let us give some padding also okay actually let us see how it is looking now okay then we can figure out what to give and what not to give okay now just come back to your browser and see we are we are unable to see anything right as our background is white and this button background is also white we are unable to figure it out right okay uh first let's give some border right so border one pixel solid we want the same color right border we also want the same color border okay okay now just press ctrl s save okay see this is our button right okay let's give some padding and if you observe carefully on hover this colors are exchanged right that is background is turning to this yellow and the text is turning to the white right so let us figure out that as well now so first of all let us give some padding to this uh i'll just say it as a seven pixel top and bot uh bottom and 14 pixel on left and right see now it is looking somewhat good okay and uh if you observe carefully this is sticking on the top and bottom so i'll just give some margin to this margin i just want top and bottom 10 pixel but on left and right i don't want any margin now let's figure that over over thing so just on button whenever we hover over on that button what we want is we just want to exchange the colors right so background to be this yellow and we want color to be white right and we also want cursor pointer as well cursor pointer now just press ctrl save now come back to your browser see it down this is paste a bit and whenever you hover over on that i see we are not we are getting the nice little effect right okay now what what more uh so uh this is actually these are all cap tells right so just come over here and just say text that property is called text transform and upper case okay so what this property does is it will convert into all capital letters now we have to decrease some font size i think so so let's say font size of 11 pixel and font weight font i'll just say it as 500 font weight of 500 no just press ctrl s save okay now it is looking good right okay now it is looking good i think now we can remove this border right now we don't want this border anymore so just come over here and where did we give that border okay it is here now we don't want this border anymore now just press ctrl s save now our carousel is ready right so we have we have this star rating we have this button but it is not looking something like this okay what may be the reason the first thing is uh this text okay this text is somewhat uh it is a capitalized and the color is something looking like gray and one important thing is we are not giving uh something like uh there is a box shadow around here and which is missing in our case so let's figure out that two things okay the first thing is we wanted this to be capitalized right so uh you can just say text transformer capitalize or just type it in capital letters over here nothing will happen top trending tvs okay font size kind of padding is okay but uh we wanted color to be something like it is something like gray right so just type in gray and i also want to increase some font weight also i also want to increase some phone to it i'll just say it as a 600 yeah now it is looking good but we want the font size to be more okay so just give a 16 pixel will it work yeah it worked but we won't steal more i'll just say it as 18 pixel and we don't want 500 but uh sorry we don't want 600 but i think 500 will be okay so yeah we want still we want less i'll just go with 400 okay now now it is looking somewhat uh now it is looking somewhat good right but we we still want uh some margin spacing uh between these are you character you can just adjust that okay you just adjust it okay and uh one more important thing and the last thing is that we want a box shadow around this right the total actually total feel and the total look will be hidden in that only that is a box shadow actually i just copied a box shadow so this is the box order i will use in almost in my every build so this is a box should i use so now just press ctrl save see now it is looking very good right that is a very pretty but whereas this is sticking to the top we don't want that to be happen where is that it's over here float right uh we are we are not giving padding we gave padding i think so so for this padding i'll just say it as a 5 pixel yeah now it's good so guys i think now we uh we are almost there right we are almost there and the last property i just want to give is i just want to give some border radius to this i'm sorry so just come over here and just say border radius i'll just say uh no need of five or seven pixel but five will be sufficient it and it will be more i think see now we got a slight border radius over here which uh is almost the same over here right so now we are almost there right so just give some spacing over here and that will be pretty much it right so that's it for this video guys so we saw how to make a bootstrap multi-item carousel in this video and you can even scroll over here and okay and we are unable to scroll because we said infinite property to false so i'll just edit that and we'll close the video so uh by default infinite property will be true so no need of passing that prop also [Music] see now we are able to scroll we are now we are able to scroll right so that's it for this video guys if you find any kind of value from this video do share with your friends and give it a thumbs up if you like the video thanks for watching do subscribe for further updates

Channel: navaneeth technical

Views: 837

Keywords:

Id: Nq7kbK2EJIA

Length: 30min 43sec (1843 seconds)

Published: Tue May 18 2021