Skip to content

Commit 2ae889d

Browse files
BachittarjeetBachittarjeet
authored
Merge pull request #62 from arpan-pro-learner/main
solved issue #9 bootstrap carousel
2 parents d046b95 + bc71aac commit 2ae889d

File tree

3 files changed

+169
-0
lines changed

3 files changed

+169
-0
lines changed

‎Bootstrap Examples/Carousel/bootstrapCarousels.html

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!-- showcasing bootstrap carousel -->
2+
<!-- types of bootstrap carousels available to use in your next project -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
12+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
13+
<title>Bootstrap Carousel</title>
14+
</head>
15+
16+
<body>
17+
18+
<section>
19+
<!-- Carousel 1 -->
20+
<div class="main_heading">
21+
<h1 class="text-center mt-4">Bootstrap Carousel</h1>
22+
</div>
23+
<div>
24+
<h3 class="text-center mt-5 pt-2">Carousel no. 1 slides only</h3>
25+
<p class="text-center"><em>Here is a simple Carousel with only 2 slides which toggle automatically after a
26+
time & it has <strong>no button</strong> to Control slides </em> </p>
27+
</div>
28+
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
29+
<div class="carousel-inner">
30+
<div class="carousel-item active ">
31+
<img src="images/slide1.png" class="d-block w-50 mx-auto" alt="...">
32+
</div>
33+
<div class="carousel-item ">
34+
<img src="images/slide2.png" class="d-block w-50 mx-auto" alt="...">
35+
</div>
36+
37+
</div>
38+
</div>
39+
</section>
40+
<section class="mb-5">
41+
<!-- Carousel 2 -->
42+
<div>
43+
<h3 class="text-center mt-5 pt-2">Carousel no. 2 with controls</h3>
44+
<p class="text-center"><em>Here is a simple Carousel with only 2 slides & <strong>Control buttons</strong>
45+
on both sides to toggle
46+
between slides</em> </p>
47+
</div>
48+
<div id="carouselExampleControls" class="carousel slide " data-interval="false" data-bs-ride="carousel">
49+
<div class="carousel-inner">
50+
<div class="carousel-item active">
51+
<img src="images/slide1.png" class="d-block w-50 mx-auto" alt="...">
52+
</div>
53+
<div class="carousel-item">
54+
<img src="images/slide2.png" class="d-block w-50 mx-auto" alt="...">
55+
</div>
56+
57+
</div>
58+
<button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleControls"
59+
data-bs-slide="prev">
60+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
61+
<span class="visually-hidden">Previous</span>
62+
</button>
63+
<button class="carousel-control-next text-warning bg-dark" type="button"
64+
data-bs-target="#carouselExampleControls" data-bs-slide="next">
65+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
66+
<span class="visually-hidden">Next</span>
67+
</button>
68+
</div>
69+
</section>
70+
71+
<section class="mb-5">
72+
<!-- carousel 3 -->
73+
74+
<div>
75+
<h3 class="text-center mt-10 pt-2">Carousel no. 3 with controls & a slide indicators</h3>
76+
<p class="text-center"><em>Here is a simple Carousel with only 2 slides & <strong>Control buttons & a slide
77+
indicator on the bottom of the slide</strong>
78+
</em> </p>
79+
80+
</div>
81+
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
82+
<div class="carousel-indicators">
83+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
84+
aria-current="true" aria-label="Slide 1"></button>
85+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
86+
aria-label="Slide 2"></button>
87+
88+
</div>
89+
<div class="carousel-inner ">
90+
<div class="carousel-item active ">
91+
<img src="images/slide1.png" class="d-block w-50 mx-auto" alt="...">
92+
</div>
93+
<div class="carousel-item">
94+
<img src="images/slide2.png" class="d-block w-50 mx-auto" alt="...">
95+
</div>
96+
97+
</div>
98+
<button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleIndicators"
99+
data-bs-slide="prev">
100+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
101+
<span class="visually-hidden">Previous</span>
102+
</button>
103+
<button class="carousel-control-next bg-dark" type="button" data-bs-target="#carouselExampleIndicators"
104+
data-bs-slide="next">
105+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
106+
<span class="visually-hidden">Next</span>
107+
</button>
108+
</div>
109+
</section>
110+
111+
<section class="mb-5">
112+
<!-- carousel 4 -->
113+
<div>
114+
<h3 class="text-center mt-10 pt-2">Carousel no. 4 with controls & a slide indicators and Captions </h3>
115+
<p class="text-center"><em>Here is a simple Carousel with only 2 slides & <strong>Control buttons & a slide
116+
indicator and captions on the bottom of the slide</strong>
117+
</em> </p>
118+
119+
</div>
120+
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
121+
<div class="carousel-indicators">
122+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" class="active"
123+
aria-current="true" aria-label="Slide 1"></button>
124+
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
125+
aria-label="Slide 2"></button>
126+
127+
</div>
128+
<div class="carousel-inner">
129+
<div class="carousel-item active">
130+
<img src="images/slide1.png" class="d-block w-50 mx-auto" alt="slide1">
131+
<div class="carousel-caption d-none d-md-block">
132+
<h5>First slide label</h5>
133+
<p>Some representative placeholder content for the first slide.</p>
134+
</div>
135+
</div>
136+
<div class="carousel-item">
137+
<img src="images/slide2.png" class="d-block w-50 mx-auto" alt="slide2">
138+
<div class="carousel-caption d-none d-md-block">
139+
<h5>Second slide label</h5>
140+
<p>Some representative placeholder content for the second slide.</p>
141+
</div>
142+
143+
</div>
144+
</div>
145+
<button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleCaptions"
146+
data-bs-slide="prev">
147+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
148+
<span class="visually-hidden">Previous</span>
149+
</button>
150+
<button class="carousel-control-next bg-dark" type="button" data-bs-target="#carouselExampleCaptions"
151+
data-bs-slide="next">
152+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
153+
<span class="visually-hidden">Next</span>
154+
</button>
155+
</div>
156+
157+
</section>
158+
159+
160+
161+
162+
163+
164+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
165+
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
166+
crossorigin="anonymous"></script>
167+
</body>
168+
169+
</html>

‎Bootstrap Examples/Carousel/images/slide1.png

8.71 KB
Loading

‎Bootstrap Examples/Carousel/images/slide2.png

9.07 KB
Loading

0 commit comments

Comments
 (0)