Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/batch-file/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Twitter bootstrap 3 旋转指示器到目标幻灯片_Twitter Bootstrap 3_Carousel - Fatal编程技术网

Twitter bootstrap 3 旋转指示器到目标幻灯片

Twitter bootstrap 3 旋转指示器到目标幻灯片,twitter-bootstrap-3,carousel,Twitter Bootstrap 3,Carousel,所以,我希望以Twitter-Bootstrap-3中的指标为目标幻灯片,但这样做有些困难 这是我的密码: <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators">

所以,我希望以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>

我需要将指示器更改为我选择的文字,并为不位于幻灯片顶部的每张幻灯片添加标题,以便指示器位于旋转木马下方,标题也位于指示器下方。我尝试了各种方法,但都没有成功。

这与你的上一个问题不同吗?是的,我现在走得更远了