How to make Image Slider using Bootstrap | Carousel Slider Tutorial

hello viewers welcome back to another video of my channel so today in this video I will tell you how you can create a image slider using bootstrap bootstrap is a CSS library from which you can use pre-made components like header navbar footer image slider Etc if you have time shortage you can make components in minutes using bootstrap so let's get started open the browser and search here bootstrap and click on the first website so here you can see the interface of get bootstrap.com so this is a library of CSS you can see the docs option in the top nav bar so click it and here is the documentation of how to use bootstrap in your code now we have to copy the link of CSS bootstrap file and JavaScript bootstrap file so scroll it down and you can see here Links of CSS and JS so copy the CSS link and go to the vs code I have created a two files here with the dot HTML and Dot CSS extension so right here link tag and in the hdf paste that link and remove the dot CSS from here now again go to website and copy the JS link of the bootstrap file and in the vs code add the script tag and in the SRC paste that link now the files are linked to our code and now we can use classes and components that are made in bootstrap so as in this video I am going to tell you how you can create a slider using bootstrap so to use the sliders scroll the side nav bar and find the option of components and in the components you can see a cursor this is our slider we are going to use this to create a slider in our code so open it and here you can see how our slider will work okay this is the basic example of how our slider will work there are many sliders here but we are going to make the first one so copy the code from here and paste it in the vs code and here you can see see our code is pasted now open it in live server and see the result you can see nothing is shown here because we have not defined any source of image in our image tag so for high quality images go to the website unsupplies.com and this is the website search here nature and download some images like this download this and we have to download three images now move this image into our folder so copy this from here and in our folder paste it and for our easiness change the name of the pictures so we can use easily in our code okay now in the code give the source of the image one by one to SRC attribute so right here pick and here pick one and help it too okay now let's see the result and here it is you can see the width and height of images are too large so we want to create a small slider okay which will look attractive so now we have to customize this slider using CSS so for this give the class of pegs to each image tag so copy this and paste it in the other images tag so now you can see here w100 class in each image tag so it's a bootstrap predefined glass which means width will be equal to 100 so we have to remove this because we want small slider so remove this class from all images tag okay now let's see the result here and you can see our code is working so now in this CSS Target that class we have given two images tag that is pix so right here dot pegs and set its width to 700 PX now you can see the result here now we have to reduce its height so go to HTML file and set the height attribute to 500px now in the browser let's see the result and you can see here our images are looking good now I want to move this container to the center so for this right click here and go to the inspect element here you can see this container contains a class of Castle inner let's target that class and move this container to the center of the page so in the vs code write dot Castle inner and set its position to relative now we want to move this container from left towards right so in the CSS gives the left property to 30 VW and top property to 10 V8 now let's see the result and you can see our container is moved towards Center but now there is a issue you can see this bar at the bottom so let's remove this so Target the body tag and in the body tag write our flow X is equal to Hidden so now you can see the bar has been removed now there is one more issue next and previous icon are not appearing so to solve this right click and go to inspect you can see next icon is appearing now you can see it contains a class of cancel control next icon so copy this class and Target this in the CSS write the class name and set its position to relative and now we want to move icon from right towards left so give the property of right to let's say say 20 VW in the CSS give the property of top to 7 VH if VW is used for width and VH is used for height so now you can see the icon is in right place now we have to move the previous icon in the image slider so right click here and inspect that element and you can see it contains a class of it contains a class of cancel control previous icon so write the class in the vs code and set its position to relative now we have to move this icon from left so give the property of left 3 VW and top property to 7 VH okay now it is displaying here we have to reduce the left property so give the value of 24 VW now it is displaying at the right place both the icons now you can see when we click on next or previous icon the image takes more time to load so this is an error to solve this we have to give Max width property to the castle inner class so in the code give the max width to 700 PX and now you can see it is working good image takes no more time to load and slider is working perfectly so in this way you can create a image slider using bootstrap in less time if you found this video helpful don't forget get to subscribe my channel if you want more videos related to bootstrap you can give this suggestion in the comment box thanks for watching and I will see you in the next video

Channel: Coding with programmer

Views: 5,996

Keywords: bootstrap, bootstrap 5, html and css, image slider, slider, slider using bootstrap, css, web development, bootstrap tutorial

Id: 1YS6x9LK4ng

Length: 8min 24sec (504 seconds)

Published: Thu Sep 07 2023