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="carousel-example-generic" class="carousel slide" data-ride="carousel">
2  <!-- Indicators -->
3  <ol class="carousel-indicators">
4    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
5    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
6    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
7  </ol>
8
9  <!-- Wrapper for slides -->
10  <div class="carousel-inner" role="listbox">
11    <div class="item active">
12      <img src="..." alt="...">
13      <div class="carousel-caption">
14        ...
15      </div>
16    </div>
17    <div class="item">
18      <img src="..." alt="...">
19      <div class="carousel-caption">
20        ...
21      </div>
22    </div>
23    ...
24  </div>
25
26  <!-- Controls -->
27  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
28    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
29    <span class="sr-only">Previous</span>
30  </a>
31  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
32    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
33    <span class="sr-only">Next</span>
34  </a>
35</div>

1<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
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</div>

1<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
2  <div class="carousel-inner">
3    <div class="carousel-item active">
4      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
5    </div>
6    <div class="carousel-item">
7      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
8    </div>
9    <div class="carousel-item">
10      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
11    </div>
12  </div>
13  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
14    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
15    <span class="sr-only">Previous</span>
16  </a>
17  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
18    <span class="carousel-control-next-icon" aria-hidden="true"></span>
19    <span class="sr-only">Next</span>
20  </a>
21</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<!-- Card -->
2<div class="">
3
4  <div class="z-depth-2 rounded">
5    <img class="img-fluid w-100"
6      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
7    <a href="#!">
8      <div class="mask">
9        <img class="img-fluid w-100"
10          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
11        <div class="mask rgba-black-slight"></div>
12      </div>
13    </a>
14  </div>
15
16  <div class="text-center pt-4">
17
18    <h5>Fantasy T-shirt</h5>
19    <h6 class="mb-3">12.99 $</h6>
20
21  </div>
22
23</div>
24<!-- Card -->