带背景的引导轮播答案

【问题标题】：Bootstrap carousel with background带背景的引导轮播
【发布时间】：2017-09-08 21:29:21
【问题描述】：

我的客户有引导模板。我在那里做了一个滑块： Slider

图像仅在笔记本电脑中移动。我想在笔记本电脑的右侧添加描述（现在滑动描述不起作用）。而且不知道该怎么做。尝试了许多变化。还是自己编写滑块而不使用 Bootstrap 更好更快？

将非常感谢任何帮助！

html:

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/people.png" alt="">
    </div>

    <div class="item">
      <img src="images/people.png" alt="">
    </div>

    <div class="item">
      <img src="images/people.png" alt="">
    </div>
  </div>

  <div class="carousel-description current">
    <div>Отчёт по результатам обследования в форме документа в PS QUASTIO PRO</div>
  </div>
  <div class="carousel-description">
    <div>Отчёт по результатам обследования в форме документа</div>
  </div>
  <div class="carousel-description">
    <div>Отчёт по результатам обследования</div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS：

#myCarousel{
    height: 510px;
    background: url(../images/computer.png) no-repeat;
    background-size: 1350px auto;

}

#myCarousel .carousel-inner{
    width: 441px;
    height: 250px;
    position: absolute;
    left: 225px;
    top: 24px;
}

.carousel {
    margin-bottom: 0;
}

#myCarousel .carousel-inner .item img{
    width: 441px;
    height: 250px;
}

.carousel-description{
    display: none;
    width: 25%;
    position: absolute;
    right: 150px;
    top: 185px;
    font-size: 20px;
}

.carousel-description.current{
   display: block;
}

【问题讨论】：

标签： css twitter-bootstrap slider carousel

【解决方案1】：

您可以使用我的代码，它不使用任何库，并且与您附加的图片相似，只需从 css 更改图片路径即可。您可以通过更改变量 yourinterval 来控制幻灯片的速度

var yourinterval=2000;

演示：http://jsbin.com/xegufazuyi/2/edit?html,css,js,output

【讨论】：