skip to Main Content

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


  1. Its a css issue
    add this css to your code

    .carousel-indicators li {text-indent: 1;}

    Login or Signup to reply.
  2. there was a some css issue. here is the working example.

    .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; text-indent: inherit;}
    body .carousel-indicators li span{
      display:none;
    }
    body .carousel-indicators li.active span{
      display:inline-block;
    }
    
    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;
    }
    
    .carousel-indicators li{
      text-indent: 0;
    }
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search