轮播指示器在 Bootstrap 上不起作用

Posted 2023-05-08

【中文标题】轮播指示器在 Bootstrap 上不起作用

【英文标题】：Carousel Indicators not working on Bootstrap

【发布时间】：2018-05-10 18:31:57

【问题描述】：

我试图制作一个包含 8 张图像的轮播，但是指示器不起作用，左右箭头也不起作用。我不知道我的代码有什么问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide carousel1" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#i1" data-slide-to="0" class="active"></li>
    <li data-target="#i2" data-slide-to="1"></li>
    <li data-target="#i3" data-slide-to="2"></li>
    <li data-target="#i4" data-slide-to="3"></li>
    <li data-target="#i5" data-slide-to="4"></li>
    <li data-target="#i6" data-slide-to="5"></li>
    <li data-target="#i7" data-slide-to="6"></li>
    <li data-target="#i8" data-slide-to="7"></li>
  </ol>

  <a class="left carousel-control" href="#myCarousel" data-slide="prev" role="button">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next" role="button">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  </a>
</div>

【问题讨论】：

你那里没有实际的幻灯片，你知道吗？ getbootstrap.com/docs/3.3/javascript/#carousel

我已经包含了引导文件。能详细点吗？

整个carousel-inner（幻灯片本身所在的位置）都不见了。当然，它不会起作用。 Honsa Stunna 已经提供了缺少元素的答案。

【参考方案1】：

数据目标必须是轮播选择器，在您的情况下是元素 id myCarousel。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>.item 
  height: 100px;

.item:nth-child(odd) 
  background-color: lightblue;


.item:nth-child(even) 
  background-color: lightgreen;
</style>
<div id="myCarousel" class="carousel slide carousel1" data-ride="carousel">
  <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>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
    <li data-target="#myCarousel" data-slide-to="7"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="item active"> 
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>

  <a class="left carousel-control" href="#myCarousel" data-slide="prev" role="button">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next" role="button">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  </a>
</div>