如何触发Bootstrap Carousel's转盘指示器

How to trigger Bootstrap Carousel's carousel-indicators

本文关键字：指示器 何触发 Bootstrap Carousel      更新时间：2023-09-26

我的代码出了什么问题？我想触发当前引导程序转盘幻灯片编号。我想在特定的幻灯片上更改文本或执行一些jQuery命令。请查看我的代码。

$(document).ready(function() {
$('#myCarousel').on('slide.bs.carousel', function (ev) {
  var id = ev.relatedTarget.id;
  switch (id) {
    case "1":
      $('#sometext').text("one");
      break;
    case "2":
      $('#sometext').text("two");
      break;
    case "3":
      $('#sometext').text("three");
    default:
      //the id is none of the above
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h1 id="sometext">Some Text here</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- 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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
      </div>
      <div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
      </div>
      <div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

尝试

$(document).ready(function() {    
   $('#myCarousel').on('slide.bs.carousel', function (ev) {
       var idx = $(ev.relatedTarget).index() + 1;
       console.log(idx);
   });
})

感谢tmg的代码，这里为那些正在寻找现成代码的人提供了正确的html代码。

$(document).ready(function() {
       $('#myCarousel').on('slide.bs.carousel', function (ev) {
       var idx = $(ev.relatedTarget).index() + 1;
/*       console.log(idx);*/
       idx = parseInt(idx);
        switch (idx) {
          case 1:
            $('#sometext').text("one");
            break;
          case 2:
            $('#sometext').text("two");
            break;
          case 3:
            $('#sometext').text("three");
          default:
            //the id is none of the above
            $('#sometext').text("default");
        }
      });
    });
相关文章：