1<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
2<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
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="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
2 <div class="carousel-indicators">
3 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
4 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
5 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
6 </div>
7 <div class="carousel-inner">
8 <div class="carousel-item active">
9 <img src="..." class="d-block w-100" alt="...">
10 </div>
11 <div class="carousel-item">
12 <img src="..." class="d-block w-100" alt="...">
13 </div>
14 <div class="carousel-item">
15 <img src="..." class="d-block w-100" alt="...">
16 </div>
17 </div>
18 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
19 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
20 <span class="visually-hidden">Previous</span>
21 </button>
22 <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
23 <span class="carousel-control-next-icon" aria-hidden="true"></span>
24 <span class="visually-hidden">Next</span>
25 </button>
26</div>
1<script src="jquery.min.js"></script>
2<script src="owlcarousel/owl.carousel.min.js"></script>
1<div id="carouselExampleControls" class="carousel slide" data-bs-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 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" 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}