<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators recommended-list clearfix">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">Tab-1</li>
<li data-target="#carousel-example-generic" data-slide-to="1">Tab-2</li>
<li data-target="#carousel-example-generic" data-slide-to="2">Tab-3</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://images.pexels.com/photos/1029604/pexels-photo-1029604.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/890029/pexels-photo-890029.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/980759/pexels-photo-980759.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
.item > img {
width: 100%;
}
.carousel-indicators.recommended-list {
position: relative;
bottom: 0;
left: 0;
width: 100%;
padding-left: 0;
margin-left: 0 !important;
text-align: center;
list-style: none;
}
.carousel-indicators.recommended-list li {
display: block;
float: left;
width: 33.33%;
height: auto;
margin: 0;
text-indent: 0;
cursor: pointer;
background-color: #e1e1e1;
color: #286090;
border: none;
border-radius: 0;
text-align: center;
line-height: 50px;
transition: all .2s linear;
}
.carousel-indicators.recommended-list .active {
width: 33.33%;
height: auto;
margin: 0;
background-color: #286090;
color: #fff;
}
#carousel-example-generic {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.