如何在引导滑块中的轮播指示器内显示图像和文本？

时间：2018-01-31 11:38:24

标签： jquery html css twitter-bootstrap

我正在使用bootstrap carousel滑块，它工作得很好。现在我正在做的是我必须在旋转木马指示器内显示图像和文字。

详细信息： -

一旦指示器处于活动状态，我必须在指示器内显示图像，然后显示文本和图像。我尝试了一些代码但仍然无法显示图像和文本。

你能帮助我吗？

请在整页上查看我的代码段。

.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 个答案:

答案 0 :(得分：0)

它是一个css问题 将此css添加到您的代码中

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

答案 1 :(得分：0)

有一些css问题。这是工作的例子。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题