how to add bootstrap carousel

1<!-- Bootstrap 5 Carousel -->
2<div
3   id="carouselExampleIndicators"
4   class="carousel slide"
5   data-bs-ride="carousel"
6>
7   <div class="carousel-indicators">
8      <button
9         type="button"
10         data-bs-target="#carouselExampleIndicators"
11         data-bs-slide-to="0"
12         class="active"
13         aria-current="true"
14         aria-label="Slide 1"
15      ></button>
16      <button
17         type="button"
18         data-bs-target="#carouselExampleIndicators"
19         data-bs-slide-to="1"
20         aria-label="Slide 2"
21      ></button>
22      <button
23         type="button"
24         data-bs-target="#carouselExampleIndicators"
25         data-bs-slide-to="2"
26         aria-label="Slide 3"
27      ></button>
28   </div>
29   <div class="carousel-inner">
30      <div class="carousel-item active">
31         <img src="..." class="d-block w-100" alt="..." />
32      </div>
33      <div class="carousel-item">
34         <img src="..." class="d-block w-100" alt="..." />
35      </div>
36      <div class="carousel-item">
37         <img src="..." class="d-block w-100" alt="..." />
38      </div>
39   </div>
40   <button
41      class="carousel-control-prev"
42      type="button"
43      data-bs-target="#carouselExampleIndicators"
44      data-bs-slide="prev"
45   >
46      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
47      <span class="visually-hidden">Previous</span>
48   </button>
49   <button
50      class="carousel-control-next"
51      type="button"
52      data-bs-target="#carouselExampleIndicators"
53      data-bs-slide="next"
54   >
55      <span class="carousel-control-next-icon" aria-hidden="true"></span>
56      <span class="visually-hidden">Next</span>
57   </button>
58</div>

1<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
2  <div class="carousel-inner">
3    <div class="carousel-item active">
4      <img src="..." class="d-block w-100" alt="...">
5    </div>
6    <div class="carousel-item">
7      <img src="..." class="d-block w-100" alt="...">
8    </div>
9    <div class="carousel-item">
10      <img src="..." class="d-block w-100" alt="...">
11    </div>
12  </div>
13  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
14    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
15    <span class="visually-hidden">Previous</span>
16  </button>
17  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
18    <span class="carousel-control-next-icon" aria-hidden="true"></span>
19    <span class="visually-hidden">Next</span>
20  </button>
21</div>

1//Author:Mohammad Arman Khan
2//BOOTSTYRAP CAROUSEL(SLIDER_LOCALLY KNOWN)
3<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
4    <ol class="carousel-indicators">
5        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
6        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
7        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
8    </ol>
9    <div class="carousel-inner" role="listbox">
10        <!-- Slide One - Set the background image for this slide in the line below -->
11        <div class="carousel-item active" style="background-image: url('https://www.bonfiglioli.com/india/images/Asphalt/image-thumb__38736__slider/istock-466386521.jpeg')">
12            <div class=" col-md-6 divleft-top">
13              
14                <p class="text-CSS">
15                    Solutions for the Asphalt Industry </p>
16
17            </div>
18        </div>
19        <!-- Slide Two - Set the background image for this slide in the line below -->
20        <div class="carousel-item" style="background-image: url('https://www.bonfiglioli.com/india/images/Asphalt/image-thumb__38736__slider/istock-466386521.jpeg')">
21            <div class="col-md-6 divleft-top">
22             
23                <p class="text-CSS">
24                    Solutions for the Asphalt Industry </p>
25
26            </div>
27        </div>
28        <!-- Slide Three - Set the background image for this slide in the line below -->
29        <div class="carousel-item"
30            style="background-image: url('https://www.bonfiglioli.com/india/images/Asphalt/image-thumb__38736__slider/istock-466386521.jpeg')">
31            <div class="col-md-6 divleft-top">
32             
33                <p class="text-CSS">
34                    Solutions for the Asphalt Industry </p>
35            </div>
36        </div>
37    </div>
38    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
39        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
40        <span class="sr-only">Previous</span>
41    </a>
42    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
43        <span class="carousel-control-next-icon" aria-hidden="true"></span>
44        <span class="sr-only">Next</span>
45    </a>
46</div>
47
48
49//CSS
50.carousel-item {
51height: 100vh;
52min-height: 350px;
53background: no-repeat center center scroll;
54-webkit-background-size: cover;
55-moz-background-size: cover;
56-o-background-size: cover;
57background-size: cover;
58}
59//optional css
60.text-CSS {
61    font-size: 55px;
62    color: #003861!important;
63    padding-top: 240px;
64    padding-left: 110px;
65}