"Bootstrap 4 carousel"
Bootstrap 4.1.1 Snippet by elsa1234

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<h1>Bootstrap 4 carousel with description</h1>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators mb-0 pb-0">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner no-padding my-5">
<div class="carousel-item active">
<div class="col-xs-4 col-sm-4 col-md-4">
<a href="#" onclick=abc(this) class="slider_info">
<img class="img-fluid card-img-top" src="http://via.placeholder.com/300x300?text=1">
<div class="card-img-overlay t_img">
<span class="float-left text-uppercase">article</span>
<span class="float-right text-uppercase">2345 views</span>
</div>
</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi nesciunt quam obcaecati maiores atque labore fugiat tenetur tempore veritatis temporibus!</p>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.col-md-4{
display: inline-block;
margin-left:-10px;
}
.col-md-4 img{
width:100%;
height:auto;
}
body .carousel-control-prev-icon,
body .carousel-indicators li,
body .carousel-control-next-icon{
background-color:#000;
}
span.carousel-control-prev-icon {
position: relative;
bottom: 40px;
right: 40px;
}
span.carousel-control-next-icon {
position: relative;
bottom: 40px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: