×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

Bootstrap5

Introduction to Bootstrap5

Component of Bootstrap


Bootstrap Carousel


Basically Carousel is that property by which we can add slider in our webpage which will be responsive one. We can add content, iframe, images , videos etc. whatever we want to add

Let’s understand this by the following program in which we show the slider for images:-

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div id="demo" class="carousel slide" data-bs-ride="carousel">

<ul class="carousel-indicators">

<li data-bs-target="#demo" data-bs-slide-to="0" class="active"></li>

<li data-bs-target="#demo" data-bs-slide-to="1"></li>

<li data-bs-target="#demo" data-bs-slide-to="2"></li>

</ul>

<div class="carousel-inner">

<div class="carousel-item active">

<img src="pythonimage/tajmahal.jpg" alt="Taj Mahal" width="500" height="300">

</div>

<div class="carousel-item">

<img src="pythonimage/redfort.jpg" alt="Red Fort" width="500" height="300">

</div>

<div class="carousel-item">

<img src="pythonimage/goldentemple.jpg" alt="Golden Temple" width="500" height="300">

</div>

</div>

<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">

<span class="carousel-control-prev-icon"></span> </button>

<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">

<span class="carousel-control-next-icon"></span> </button>

</div>

</body>

</html>

Output of this Program


bootstrap 5 Example

So here our carousel is ready here.



Here are some other classes of carousel which we can use in bootstrap. Some of the classes and their description is stated as follows:-


Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button
.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect







Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute