<!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 class='carousel-caption d-none d-md-block'>
<h5>First slide</h5>
<p>This is wings.</p>
</div>
</div>
<div class='carousel-item'>
<img src='cat.png' class='d-block w-100' alt='slide two'>
<div class='carousel-caption d-none d-md-block'>
<h5>Second slide</h5>
<p>This is cat.</p>
</div>
</div>
<div class='carousel-item'>
<img src='design.png' class='d-block w-100' alt='slide three'>
<div class='carousel-caption d-none d-md-block'>
<h5>Thierd slide</h5>
<p>This is disign.</p>
</div>
</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
