Question

我的客户端有自举模板。我在那里做了一个滑块： 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;
}

Answer 1

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

var yourinterval=2000;

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

Bootstrap转盘有背景

1 个答案: