I am using bootstrap carousel slider which is working perfectly. Now what I am doing is I have to display the image and text inside carousel-indicators.
In details:-
I have to display the image inside indicator once my indicator is active then display the text and image both. I tried some code but still not able to display the image and text.
Would you help me out in this?
Please check my snippet on full page.
.carousel-inner .item {max-height: 480px;}
.item img{width: 100%;}
.carousel-inner .item:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
body .carousel-indicators{
left: 0;
width: auto;
margin-left:0;
padding: 20px 10px;
border-radius: 40px;
}
body .carousel-indicators li{width: 40px;height: 40px;border-radius: 50%;display: inherit;margin: 15px 0;background-color: #fff;}
body .carousel-indicators .active{width: 150px;height: 50px;background-color: #fff;border-radius: 40px;
transition: 1s;
}
.carousel-indicators li img{width: 15px;}
.carousel-control {
width: 10%;
}
.carousel-control .fa {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control.left, .carousel-control.right{background-image: none;display: none;}
.carousel-caption h2,.carousel-caption h3 {text-transform: uppercase;font-weight: 800; letter-spacing: 2px;}
.carousel-caption h3 {
color: #000000;
/* margin-bottom: 20px;*/
padding: 10px 0;
font-size: 35px;
}
.carousel-caption h2 {
display: inline-block;
font-size: 30px;
}
.carousel-caption p {
color: #000000;
font-weight: 300;
/* font-size: 30px;*/
padding: 24px 0;
}
.carousel-caption p.personal_text_ligt{font-size: 28px;}
.carousel-caption p.business_text_ligt{font-size: 28px;}
.carousel-caption p.home_text_ligt{font-size: 28px;}
/*.carousel-caption p.business_text_ligt{font-size: 28px;}*/
.carousel-caption p.advisory_text_light{font-size: 24px;}
.carousel-caption{left: 25%;top: 20px;text-shadow:none;text-align: left;}
.text_bg {
background: #0065B3;
color: #fff;
padding: 11px 45px;
}
.light_green{color: #00876D;font-weight: bold;}
.light_orange{color: #FF7D01;}
.offer_now_text{font-weight: bold;font-size: 35px;text-transform: uppercase;}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="img-carousel" data-ride="carousel" class="carousel slide">
<!-- Indicators-->
<ol class="carousel-indicators">
<li data-target="#img-carousel" data-slide-to="0" class="active"><img src="http://static.appstore.vn/a/uploads/thumbnails/032016/cornie-icons_icon.png"><span>Slider 0</span></li>
<li data-target="#img-carousel" data-slide-to="1"><img src="https://storage.backtory.com/beeptunes/content/user/pic/a303ce74-09c5-4a8b-bd14-b4518255eba7.png"><span>Slider 1</span></li>
<li data-target="#img-carousel" data-slide-to="2"><img src="http://kodiupdate.com/wp-content/uploads/2017/02/What-is-kodi-Skin-icon.png"><span>Slider 2</span></li>
</ol>
<!-- Wrapper for slides-->
<div role="listbox" class="carousel-inner">
<div class="item active"><img src="http://www.hkepci.com/data/out/4/276480-images.jpg" alt="" />
<div class="carousel-caption">
<h3 class="animated fadeInDown">Lorem ipsum dolor sit amet,</h3>
<p class="animated fadeInUp personal_text_ligt">Lorem ipsum dolor sit amet,</p>
<h2 class="text_bg btn-rounded btn-large">Lorem ipsum dolor sit amet,</h2>
</div>
</div>
<div class="item"><img src="http://www.hkepci.com/data/out/4/276480-images.jpg" alt="" />
<div class="carousel-caption">
<h3 class="animated fadeInDown">Lorem ipsum dolor sit amet,</h3>
<p class="animated fadeInUp business_text_ligt">Lorem ipsum dolor sit amet,</p>
<h2 class="text_bg btn-rounded btn-large">Lorem ipsum dolor sit amet,</h2>
</div>
</div>
<div class="item"><img src="https://www.bmwjamaica.com/content/dam/bmw/common/all-models/m-series/m4-convertible/2017/images-and-videos/images/BMW-m4-convertible-images-and-videos-1920x1200-06.jpg.asset.1487344406677." alt="" />
<div class="carousel-caption">
<h3 class="animated fadeInDown">Lorem ipsum dolor sit amet,</h3>
<p class="animated fadeInUp">Lorem ipsum dolor sit amet,</p>
<h2 class="text_bg btn-rounded btn-large">Lorem ipsum dolor sit amet,</h2>
</div>
</div>
</div>
<!-- Controls-->
<div class="left carousel-control">
<a href="#img-carousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
</div>
<div class="right carousel-control">
<a href="#img-carousel" data-slide="next"><span class="icon-next"></span>
</a>
</div>
</div>
2
Answers
Its a css issue
add this css to your code
.carousel-indicators li {text-indent: 1;}
there was a some css issue. here is the working example.