The Bootstrap Carousel or sider is a flexible, responsive path. It is used to add the slider to your web page. It is very responsive and flexible. With this, you can also add Images, Iframes, Videos, and any other type of content.
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Bootstrap CSS -->
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
<title>Slider demo</title>
</head>
<body>
<div class='container mt-3 '>
<h1 class='text-center'>Slider demo</h1>
<hr />
<div class='carousel slide bg-dark text-white' id='slider' data-bs-ride='carousel'>
<div class='carousel-indicators'>
<button type='button' data-bs-target='#slider' data-bs-slide-to='0' class='active' aria-current='true' aria-label='Slide 1'></button>
<button type='button' data-bs-target='#slider' data-bs-slide-to='1' aria-label='Slide 2'></button>
<button type='button' data-bs-target='#slider' data-bs-slide-to='2' aria-label='Slide 3'></button>
</div>
<div class='carousel-inner text-center'>
<div class='carousel-item active'>
<img src='logo.png' class='d-block w-100 h-50 ' alt='slide one' />
</div>
<div class='carousel-item'>
<img src='cat.png' class='d-block w-100' alt='slide two'>
</div>
<div class='carousel-item'>
<img src='design.png' class='d-block w-100' alt='slide three'>
</div>
</div>
<button class='carousel-control-prev' type='button' data-bs-target='#slider' data-bs-slide='prev'>
<span class='carousel-control-prev-icon' aria-hidden='true'></span>
<span class='visually-hidden'>Previous</span>
</button>
<button class='carousel-control-next' type='button' data-bs-target='#slider' data-bs-slide='next'>
<span class='carousel-control-next-icon' aria-hidden='true'></span>
<span class='visually-hidden'>Next</span>
</button>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>
Output
