用于定位幻灯片的轮播指示器

时间:2014-05-21 16:32:16

标签: twitter-bootstrap-3 carousel

所以我希望在Twitter-Bootstrap-3中使用指标来定位幻灯片,但这样做有些困难。

这是我的代码:

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

  <div class="carousel-inner">
    <div class="item active" data-id="1">
      <img src="/assets/example/bg_suburb.jpg">
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel Layout</h1>
          <p><small>This is an example layout with carousel that uses the Bootstrap 3 styles.</small></p>
        </p></div>
      </div>
    </div>
    <div class="item" data-id="2">
      <img src="http://lorempixel.com/1500/600/abstract/1">
      <div class="container">
        <div class="carousel-caption">
          <h1>Changes to the Grid</h1>
          <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
        </div>
      </div>
    </div>
    <div class="item" data-id="3">
      <img src="http://placehold.it/1500X500">
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>With "mobile-first" there is now only one percentage-based grid.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
</div>
<!-- /.carousel -->


 <script>

$('.carousel-indicators li').click(function(e){
    e.stopPropagation();
    $('#myCarousel').carousel($(this).data('slide-to')-1); 
});

</script>

我需要将指标更改为我选择的单词,并为每张幻灯片添加标题而不是位于幻灯片顶部,因此指示符位于转盘下方,标题下方也有标题。我已经尝试了各种各样的方式,但无处可去。

0 个答案:

没有答案