I am implement carousel using below code. In this i want two caption as per carousel slide. So i will add one more caption div but it’s not working properly.I need one caption for top left corner of the carousel another one bottom of the carousel. I am not aware of css so please help anyone.
JavaScript
x
33
33
1
<div id="myCarousel" class="carousel slide" data-ride="carousel">
2
<!-- Indicators -->
3
<ol class="carousel-indicators">
4
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
5
<li data-target="#myCarousel" data-slide-to="1"></li>
6
</ol>
7
<!-- Wrapper for slides -->
8
<div class="carousel-inner">
9
<div class="item active">
10
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
11
<div class="carousel-caption">
12
<h3>Los Angeles</h3>
13
<p>LA is always so much fun!</p>
14
</div>
15
</div>
16
<div class="item">
17
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
18
<div class="carousel-caption">
19
<h3>Chicago</h3>
20
<p>Thank you, Chicago!</p>
21
</div>
22
</div>
23
</div>
24
<!-- Left and right controls -->
25
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
26
<span class="glyphicon glyphicon-chevron-left"></span>
27
<span class="sr-only">Previous</span>
28
</a>
29
<a class="right carousel-control" href="#myCarousel" data-slide="next">
30
<span class="glyphicon glyphicon-chevron-right"></span>
31
<span class="sr-only">Next</span>
32
</a>
33
Advertisement
Answer
I think the below sample will help you ,
Make the caption 100% width and height , and override some properties for poth the h3 and p text (using media queries for different views)
JavaScript
1
30
30
1
.carousel-caption {
2
width:100%;
3
height:100%;
4
left:0 !important;
5
}
6
7
.carousel-caption h3 {
8
text-align:left;
9
margin-left:30px;
10
}
11
.carousel-caption p {
12
margin-top:40%;
13
}
14
@media screen and (max-width: 479px) {
15
.carousel-caption p {
16
margin-top:20%;
17
}
18
}
19
20
@media screen and (min-width: 480px) and (max-width: 640px){
21
.carousel-caption p {
22
margin-top:30%;
23
}
24
}
25
26
@media screen and (min-width: 641px) {
27
.carousel-caption p {
28
margin-top:40%;
29
}
30
}
JavaScript
1
48
48
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
3
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
4
<div id="myCarousel" class="carousel slide" data-ride="carousel">
5
<!-- Indicators -->
6
<ol class="carousel-indicators">
7
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
8
<li data-target="#myCarousel" data-slide-to="1"></li>
9
<li data-target="#myCarousel" data-slide-to="2"></li>
10
</ol>
11
12
<!-- Wrapper for slides -->
13
<div class="carousel-inner">
14
<div class="item active">
15
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles">
16
<div class="carousel-caption">
17
<h3>Los Angeles</h3>
18
<p>LA is always so much fun!</p>
19
</div>
20
</div>
21
22
<div class="item">
23
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
24
<div class="carousel-caption">
25
<h3>Chicago</h3>
26
<p>Thank you, Chicago!</p>
27
</div>
28
</div>
29
30
<div class="item">
31
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York">
32
<div class="carousel-caption">
33
<h3>New York</h3>
34
<p>We love the Big Apple!</p>
35
</div>
36
</div>
37
</div>
38
39
<!-- Left and right controls -->
40
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
41
<span class="glyphicon glyphicon-chevron-left"></span>
42
<span class="sr-only">Previous</span>
43
</a>
44
<a class="right carousel-control" href="#myCarousel" data-slide="next">
45
<span class="glyphicon glyphicon-chevron-right"></span>
46
<span class="sr-only">Next</span>
47
</a>
48
</div>