"carousel news slider 1"
Bootstrap 3.1.0 Snippet by boygautama

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide1"></a>
<div class="caption">
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</div>
<div class="item">
<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide2"></a>
<div class="caption">
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</div>
<div class="item">
<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide3"></a>
<div class="caption">
<h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
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
27
28
29
30
31
32
33
34
35
36
body { padding-top: 50px; }
/*#####################
Additional Styles (required)
######################*/
.carousel-indicators {
bottom:-40px;
left:0;
width:100%;
background:#ccc;
padding: 6px 0px;
margin-left:0;
border-top:2px solid #fff;
}
.carousel-indicators li {
width:12px;
height:12px;
background:#fff;
border-color:#fff;
}
.carousel-indicators .active {
width:14px;
height:14px;
background:#428bca;
border-color:#428bca;
}
.carousel-inner .thumbnail {
margin-bottom:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.carousel-inner .caption {
background:#ddd;
padding: 10px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$('#myCarousel').carousel({
interval: 4000
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Carousel Featured News Boostrap 4
Client or Partners Logo Slider
Bootstrap 4 Carousel

Questions / Comments: