How to make bootstrap nav-tabs to slide? - html

Question

I have made nav-tabs using bootstrap. The tabs change the body content. I want to fit only 5 tabs at one time and want to add a slider on the nav-tabs.Using flexslider somehow changes the UI effect. Please can anyone help on this.
Here is the fiddle https://jsfiddle.net/pq7Lzu1t/1/
<div class="row">
<div class="col-md-12">
<div class="color_gray_shad height_box flexsliderDenim">
<ul class="nav nav-tabs slides">
<li id="denim_li1" class="active info_list" style="margin-left: 12%;"> <a class="info_tab" href="#tab1default" data-toggle="tab" role="tab"> <img class="img-responsive denimImagePad" src="http://placehold.it/50x80"></a>
</li>
<li id="denim_li2" class="info_list"> <a class="info_tab" href="#tab2default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
<li id="denim_li3" class="info_list" style="width: 16%;"> <a class="info_tab" href="#tab3default" data-toggle="tab" role="tab"><img class="img-responsive" src="http://placehold.it/50x80" style="position: absolute;top: 36%;"></a>
</li>
<li id="denim_li4" class="info_list"> <a class="info_tab" href="#tab4default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80"></a>
</li>
<li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
<li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
<li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
</ul>
</div>
</div>
CSS
.color_gray_shad {
/* background-color:#EEEEEE; */
}
.height_box {
height:18%;
}
.nav-tabs>li.info_list {
width:14%;
}
.nav-tabs>li.active>a.info_tab:before {
content:' ';
position: absolute !important;
width: 0;
height: 0;
left: 43%;
top: 111px;
border: 10px solid;
border-color: #C04C36 transparent transparent transparent;
z-index: 100;
}
.nav-tabs>li.active>a.info_tab, .nav-tabs>li.active>a.info_tab:focus, .nav-tabs>li.active>a.info_tab:hover {
background-color: #C04C36;
text-align: center;
height: 113px;
background-color: #C04C36;
border: 1px solid #C04C36;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* -webkit-box-shadow: 2px 2px 4px #002554; */
-moz-box-shadow: 2px 2px 4px #C04C36;
/* box-shadow: 2px 2px 4px #002554; */
}