Owl Carousel With Bootstrap 5

hi and welcome back to this channel and today in this video we are going to be talking about our carousel with bootstrap version 5. so how you can use the owl carousel with bootstrap version 5. so just for the information the owl carousel is a jquery plugin that allows you to create nice and responsive carousel sliders on your web pages so it's actually a plugin you can download uh from the internet and then include certain of its files into your web project and in order to be able to create responsive and nice carousel sliders okay so my project here i'm going to be showing you new examples on how you can actually use this owl carousel plugin and so my project is pretty much organized as usual i have the various folders here css phones images javascript and i have my two files index.html and then the style.css file okay so make sure you have the bootstrap yeah and just start that css i'm not definitely going to be using the font awesome but uh i just put it there okay so now let's uh directly go to downloading the the our carousel plugin so as i said it's a plugin it's a jquery plugin that you can download from the internet so in order to download that you simply have to come on google here and then write owl carousel like this press enter and then click on the first link here then it's going to lead you to the official website of the owl carousel plugin so you have two options you either can install or include the owl carousel into your web project by uh including the cdn link or you can actually download the owl carousel on your local computer so that's what i did i clicked on this button here to download the owl carousel on my computer or you can also come here on the navigation bar you have the download link here when you click on that it's going to download the folder so let's do that okay when i click here you will see that i have the the owl carousel downloaded on my computer so once it's downloaded you have to extract uh the file and then you get the this file like this when you click in here you have different folders so what we are actually going to be using in this video these files are contained in this docs folder when i click here and i have to click on assets and on our carousel and in here i have the javascript files and when i click click on assets again i have the css files so throughout this video i'm going to be showing you how and at what time to use each of these files in your project okay so that's actually it so now the first scenario we are going to look at is going to be uh on how if you want to create like a basic owl carousel on your web page which file should you include on your web uh on your on your web project okay let me come back to this folder so if you want to create a basic owl carousel you have to definitely include either of these two css files all that carousel that css or you can include the owl that carousel that minified that css so you simply have to copy that and come to your web project directory so if it is a css file you can include it into your css folder here like i did i simply paste it and replace because i already copied it so when you replace you have the hour that covers that mini file uh that css file inside your web project and the next step is going to be to actually link it to your project so you're going to link it uh pretty much the same way you link your css file okay so write style sheet here and then href will say css forward slash and that was our carousel that minified that css like this okay and then save so you have included this owl that currency.css file and as i was saying this file is actually required and should always be included whenever you want to use the owl carousel plugin in your web project so it has to be included before including any other file uh in your web project and if i come back to this okay this folder we downloaded you can see the how that theme that default or the owl the theme that default that minified files these files we could also add them but they are not compulsory they are just optional so i'm going to show you later on in the video when you actually can add these uh to these files and uh it's definitely gonna be whenever we want to add like navigation controls to our carousel slider or we want to add pagination to the slider but as i said this um first scenario we are going to be doing here now is going to be on how to create a very basic carousel on a web page okay so after including the carousel css file which is the the owl that carousel that minified that css we now have to include the javascript files okay so the first one is going to be uh the jquery file okay the jquery files because we say that our carousel is a jquery plugin so you definitely need to include some jquery in your web web project so the same thing if you want to uh actually get the jquery file what you have to do is to come on google and type jquery uh download it's going to lead you to the jquery website when you click on the link it's going to lead you to this website and then you can download your jquery file so you click here on this link there you can see that you have the code for your jquery file all you have to do is simply copy this and then create a file and paste the code in there and then include that jquery inside your web project so as for me i already included the jquery inside my uh web project okay and i put it inside my js folder so if i come here there you can see i have the jquery file in here so all i need to do is to include the jquery inside my html file so i'll say js forward slash jquery this and that's it so that's the first javascript file you need in order to get your owl carousel working then the second file is going to be the owl carousel that minified.js okay if you come back to the our carousel uh folder we downloaded from the internet when you come back here then you can see that we have out that carousel that minified that javascript okay so this is actually the file you will need to copy and come back to your project inside your javascript folder paste that in here so i'm simply going to say replace because i already pasted it so there i have my javascript and then i need to come back to my html file and actually include that script here i will say source js then owl that carousel that minified.js like this so this is the setup you need to put in place so always remember you need to have your css this is this file is actually required okay the owl that carousel that minified that css or and then you have to include your javascript your jquery.js and also your owl that cursor.minified.js uh inside your html file so now we are going to write some html code in order to show you actually how this works okay so all you need to do is to wrap your your tags uh inside the container element that contains the class how the carousel so i'm gonna show you what i mean by that so since we are using bootstrap i'm gonna say div class and i will say container like this and in here i'm gonna create another d i'll say class i'm going to give this class our carousel like this so this class how carousel is actually mandatory to apply uh the proper styles that come from the owl that carousel that minified that css file so if you want default navigation controls like the buttons or the pagination doubts we will have to include the the owl that theme that default that minified and also add another class in here but i'm going to show you that later on okay so once we have done that we can now add some more beefs or some more tags so i'm simply going to say class this class i'm going to call it uh background bg info this now say your content something like that right so i'm simply going to copy and paste and here i will say maybe danger info avenger and then j like this okay so now this is the html code we have uh written okay so let me come to let me uh come to my project folder here and let me say that i want to open this into my browser so when i open nothing is showing even though we have added our html code in here so nothing is showing is because we have not added any option to the plugin so we need to write a little bit of a javascript in order to trigger the all carousel class that we put in here okay so we need the javascript to actually make this um html code to run and show some writing on our web page okay so what we have to do is to actually we need to call the owl carousel initialization function and then our carousel is going to be ready so we have two options we can either simply write a script like this and uh inside the script we are going to write the code the javascript code that we need uh like we say document and ready function and in here we say that our carousel that our carousel and then semicolon like this and save so this is actually the initialization of our hull carousel function so this is the code you need to actually write so now if we come back to our web page and refresh so we need to change this so we will say i'll carousel like this and save and we'll come back to our page and refresh there you can see that we are having uh our various uh divs showing on the web page let me simply increase the margin top here i'll say five like this all right so now here you can see that we are having this is actually a carousel made up of divs that are having different background colors so i can use my mouse to actually scroll through these uh carousel items all right so this is really a basic carousel item you can use so you always have to make sure that you have this initialization or else your carousel is not going to work okay so now we are going to try to embellish our carousel okay as you can see here is simply uh some divs and then we have put some text and some background color uh it's not really nice so i'm going to use a card class to actually include some images and some text so that we can see really how this looks like all right so in here i'm going to calm i will remove all of this like this and then like this so inside i'm going to create another div so say div class say card all right and in the card here i'm going to say um img source i'll say images background like this and i'm also gonna say div class card body like this and h5 class and i'll say card title uh so simply say image title and here i will say your description will come and then save so now i'll simply going to repeat this like this i'm going to add a class uh here in the images tag i will say class image there will be card image top like this the same here or the card image talk so i will copy wait i also need to change this instead of background info i'm simply going to say margin start 2 and margin and 2. so this is actually just going to put some margin and as you know these are bootstrap classes i'm adding margin between these carousel items okay so now i can copy and paste as much as i want okay so i'm simply going to change the images um so up here i'm going to say background one two three four and five like this so that's it so now let me come to my web page and then refresh so now as you can see my cards are not having the same uh the same size okay when i scroll you can see some images are too large some other images are too small so one way to change that is to add some css code so i'll come to my css code here so this is just some generic code in the for the body uh i am going to add a code so in order to make my all my images my chord images to have the same height so if you recall i added a class here card image talk so that's class i'm going to use that in order to apply some properties to all my images and i guess this is going to fix that up and i'm going to say height let me say 40 vh and weight 100 and object fit will be covered okay so let me come and refresh there you can see all my images are having the same height and as you can also see it's actually a carousel of images you can use your mouse to scroll through the images so when you drag your mouse it takes you to the the next image or the previous image so this is actually how you create a basic uh carousel and as you can see there is no navigation uh control here there's no button where i can click on in order to take me to the next carousel item but uh i can use my mouse to actually drag me to the next item and we can also add some options to the plugin in the javascript uh part of our code here so now what we're going to do is we are going to create a javascript file where i'm going to paste all this code because i just don't want to put it in the same uh file as the html the index.html file so i'm going to click on my javascript like this and then create another javascript file that i'm going to call script.js press enter so i have it here all i'm going to do is copy i'm actually going to cut i'm simply going to cut this when i cut come to script.js paste it like this okay let me remove this and um in script.js i actually can also remove this portion of the code like this okay so now we are okay so as i was saying we can add some uh options to the plugin you can have some options like the autoplay option that will uh let the car result to autoplay so what i'm gonna do is add an option called autoplay like this and i will simply say true so this auto play is actually make the carousel to scroll through uh the items without any human intervention okay and let me save come and refresh i will add autoplay hover pause this one will also be true and then autoplay timeout 100 save okay this is not working because i actually need to include the script like this so i'll say source.js and i'll call it script.js like this okay so now it's included in our html file so when i come and refresh there you can see my carousel and as you can see it is scrolling by itself automatically okay without me using my mouse or anything else so that's actually some of the options you can add in your javascript function here in order to auto play the owl carousel so now let's say that you want to add some some navigation controls button or some pagination to the carousel what do you need to do so as i was telling you at the beginning what you have to do is actually to add the this file called i'll that theme that default uh or out that theme that default that minified that css okay so that's actually what we're going to do i'll simply copy and here in my css i will paste it simply replace because i already pasted it and i need to come into my html head and i'm going to link like this for be established href css how that frame that default that minified like this yeah now you are good to go and that's not the only thing you need to do the other thing you need to do is actually to add another class here just beside the our carousel class you need to add the owl fame class so that's something you definitely need to add okay so once you have added that let me come to my web page and refresh you can see that we are having the pagination here okay imagination when i click it takes me to uh the next item in my carousel okay so but the navigation controls are not showing so to make them actually show i need to add some uh options to the plugin in the javascript code so in here what i'm going to say for example that will be items so items here is going to make reference to the number of uh carousel items to show in the current cell actually on the web page so i'll say carousel items four and save and now let me come here you will see that instead of having three castle items we're going to have four carousel items okay so now we are having four carousel items because i specified it here and i'm gonna say nav true so this is going to make reference to the navigation controls buttons the previous and the next button all right and i'll say uh loop like this so the loop here is uh going to loop the carousel from the last item to the first item say over and over again because we say that loop yet must be true so now let me come and refresh okay so when we refresh you can see here we are having the navigation buttons it's kind of small we can see that where we have it down here so when you click it takes you to the previous when i click here it takes me to the next item in my carousel all right so we we still need to actually style this carousel we can actually style the the pagination but the dots here we can also style these navigation controls button in order to do that we are going to use the css uh file and in the css file we are going to add some code so the first one is going to be owl i would say previous okay like this and i would say left will be minus 30 pixels like this so the same thing for our next but here i would say right minus 30 pixel and then down here i will say how that previous comma class hall next in here i will say position um absolute so this is going to take you to the top and i will say top 90 pixels so now when i come here so as you can see we are having these buttons here we can't actually see them very clearly because they are too small so i need to increase their size that's what i'm going to do so i'll say i'll prev like this span comma that owl hyphen next span and i will say font size uh which size can i give to that let's say 80 pixels and the color i would say black okay so i want to come here there you can see now we have the buttons the navigation control buttons so when i click it takes to the next item and it's also looping because we specify that loop is true okay i can also add some more css styling i was going to say our theme comma that our hyphen now no c class like this on hardware around the background to be transparent yeah so that's it come and refresh so guys this is a very basic our carousel you can add some more uh css to it and as you can see here based on the last css style i added when i hover on the navigation control a the background is becoming transparent okay so that's actually it now the next thing i want to show you is on how to add lazy loading effect to your plugin so lazy loading is actually a practice of delaying or the load or the initialization of resources or object until they are needed in order to improve the performance and to save resources so um briefly it's actually uh delaying the the load time of your images on your web project on your web page for example so i'm going to show you how to do just that using the our carousel plugin okay so what you need to do is actually come to your html uh file here okay and you simply need to change some few stuff so i'll instead of writing src here source you add data hyphen and the class here you will say lazy no you say how lazy and then save so you would do the same thing everywhere and how lazy like this so i'll simply copy and down here as well so here that will be lazy now how there is some copy then paste all right and then i will just save that so when i come to my web page here and then refresh you can notice that the images are not losing anymore okay so we need to add some options to the plugin in order to make sure that the images are loaded whenever we refresh the web page so the option we need to add we're going to do that in the script.js file we created and we were simply going to say lazy load like this true when we refresh all right so as you can see the images are now taking some time to load whenever we refresh our web page so it's so the lazy loading effect as i was saying at the beginning it delays the load time of an item or a resource so now we applied it on the images so that's why when we refresh the web page the images are taking some time to actually load and then show on our web page we can also add some more options for example we could say margin uh five part in maybe five as well and stage part in maybe five all right so when we refresh we will still have the same lazy loading effect images that are loading with a little bit of uh delay a slight delay in the loading time all right so that's actually how to add lazy loading to your web project using the owl carousel so one thing that is also possible that i also need to talk to you about is the possibility of making your how carousel responsive okay so if you want to make your owl carousel responsive all you need to do is to add an option uh to your plugin like this you need to come to your script.js file and simply say responsive semicolon open the brackets and inside the brackets you need to specify the screen sizes and then specify the number of items uh carousel items that need to be showing based on the screen size that you have specified let's say for example i say zero and so that means that if the screen size is zero pixels i want only one item to show and i don't want the paginations so i will simplify dots here will be false like this and i can also precise another screen size i would say from 485 pixels i would say the number of carousel items will be two and that's pagination will be false i need to put the comma here all right comma another so from seven going i would say the number of items will be um three and that will also default i don't want any of that or pagination to show the next screen size will be 960 and it will be i times four that's false like this and then i can say the last screen size i want to define will be uh 1200 and here i want 500 times to show and i can pretty much say that i want a dot to be true like this so from a screen size of 1200 going it's going to be showing five items and that will definitely be shown so this is actually to make the carousel uh this is going to make the carousel responsive so now let me show you when i refresh now we are having 500 items on our uh screen this is because we specified here that when we have a screen size of 1200 and up going we need to have five items character items showing you see that if i say four here and then refresh we will have four items here and this is also responsive because when i reduce the size of my browser my screen browser you can see that uh based on what we specified to be the screen sizes here uh the number of items currency items showing will also be picking from what we specified in the options so the more i am reducing the size of my browser window then you can see that we are having different numbers of items on the screen okay so this is actually how you make your carousel uh responsive so you simply need to put the responsive option here and then define the various screen sizes and the number of items and the other the other properties you want to apply based on the screen size so for more information about this responsive uh function of the our carousel you can find more information on the our carousel official website so this is about the responsive function all right so the next thing we can also look at is on how to add some animation to your to your carousel uh item okay it is possible to add animation and transition to your carousel item so one thing to note here is that the animate the animations or the animate functions will only work with one item and only in certain browsers that support perspective properties okay so we are going to change a little bit of our code so let's come back to the html part of our code and in here i'm going to add uh some styling as i will say style like this and wait that will be 800 pixels okay and i will remove the lazy loading so everywhere we put data and how lazy like this i'll simply remove that so once i have removed uh the lazy loading code we added in our html uh file we also need to remove all the options that we added based on leading uh the lazy loading effect so i can simply remove that and also as we said the the animation only works on one carousel item all right so i will say items here will be one and i will remove the responsive option as well save so one important thing we need to actually let me first come here and refresh and see what happens so now when we refresh we're having a single carousel item uh here but the the most important thing in order to add an animation to your your carousel slider okay so when we have done that we can come back to the script.js and we will simply add an animation and we say animate out and we say fade out then save so when we come and refresh you'll see that when we click on next so it fades out and takes us to the next carousel item so the animation is actually working and one other important thing to note here is that the fade out value is the only built-in css animation uh style but if we want other additional css animations we can use another plugin called okay so we can actually use animate.css together with our current cell in order to have uh tons of uh different animations uh on our carousel items so in order to get the animate that css file you can um go on the internet you can also go on the carousel website directly i'll simply show you how cell okay so when you come here you click on demo and then scroll down you have animate here so this is going to tell you how to add animation and uh so you also have the link here and you say download animate.css if you want to add more animations okay you want to get more animations to add to your carousel you can click here it will take you to another website but in this project you can also instead of going on the internet you can simply get the animate that css file uh from the folder we downloaded uh from the internet okay so when you come to the the our carousel folder we downloaded when you come to assets here instead of clicking on on our carousel you simply have to click on the css folder there you have the animate.css file so what you're gonna do is to simply copy that come to your project and paste it okay simply say replace and paste it and then you will simply need to come and include that css into your html head and href so let's say css animate that css like this okay so once this is added then you can add the animations so now you are ready to extend your all carousel slider with new uh transitions and animations so one way to add an animation is to come on in your script.js file and always make sure to add an animate in option where you're going to specify an animation that you need to put so as for me here i'm going to put choose to add a flip in y animation and then comma and you also need to add an animate out option and here i'm going to say zoom out down like this now when i come to my web browser and refresh so now if i you will see that when i take clicking on the next button i'm having kind of animation on my web project okay so when i click on the next button let me simply remove the autoplay like this and save come back to refresh so when i click you see the animation the transition actually between the previous and the next carousel item okay so you can actually put a lot of animation here if you want to know more about which animation to actually put thing here you can go to the animate.css or website this is the website and here you have the different animations and transitions for example if i say bounce here as you can see it's showing you what this animation actually does all right so the one we chose was uh we said flip in y okay yeah that's it flipping why there's flipping x as well let's say for example we change this to flip in x and save we will come and refresh so this is how it's showing so the animation in is doing the flipping x and the out the animation out is doing the zoom out down so guys this was actually about how to use the owl carousel with the bootstrap five and as we could see you could do a lot of things with that and in the next video i'm going to be talking about the animate.css plugin a little bit more further explaining a lot of stuff about that plugin and i'm also going to be uh creating some website using bootstrap and then the owl carousel in order to show you uh in real life how to build the website uh using the the bootstrap library and then the owl carousel plugin so i hope this video would be informative and you would enjoy all the information and thanks for viewing so let's meet in the next video

Channel: Coding River

Views: 16,689

Keywords: image slider html and css javascript, owl carousel slider with bootstrap 5, bootstrap 5 owl carousel, owl carousel slider, owl carousel plugin with bootstrap 5 explained, owl carousel jquery plugin, jquery plugin owl carousel with bootstrap 5, owl carousel jquery plugin explained, how to use owl carousel in bootstrap 5, owl carousel jquery responsive, owl slider bootstrap 5, owl carousel slider with bootstrap 5 full feature, coding river

Id: TlMJZcRAq6M

Length: 39min 14sec (2354 seconds)

Published: Tue Feb 23 2021