引导轮播不工作 - 图像只是堆叠答案

【问题标题】：bootstrap carousel not working -- images simply stacking引导轮播不工作 - 图像只是堆叠
【发布时间】：2017-05-25 20:51:21
【问题描述】：

过去几个小时我一直在尝试解决这个问题，我在这个网站上搜索并搜索了任何解决方案，但任何提示或建议都无法解决问题。

我正在使用 CodePen，只是想插入一个轮播。当我运行代码时，图像只是堆叠在一起，所有幻灯片的文本在最后一张幻灯片上堆叠在一起。我无法显示滑块或控制按钮/箭头。任何帮助将非常感激。我知道以前有人问过这个问题，但正如我所说，我已经尝试了所有解决方案，甚至只是复制代码并插入我的信息，但没有运气。

<style>

.slide1{
background-image: url('http://a.fssta.com/content/dam/fsdigital/fscom/nfl/images/2014/12/09/120914-3-NFL-Packers-Aaron-Rodgers-OB-PI.vresize.1200.675.high.64.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.slide2{
background-image: url('http://www.greenbaypackernation.com/wp-content/uploads/2016/08/aaron-rodgers-packers.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.slide3{
background-image: url('http://sporrepor.com/wp-content/uploads/2015/12/Aaron-Rodgers.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

</style>

<body>

<div id="theCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#theCarousel" data-slide-to="1"></li>
    <li data-target="#theCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
    <div class="slide1"></div>
    <div class="carousel-caption">
      <h3>Aaron Rodgers</h3>
      <p>Slide 1</p>
    </div>
    </div>
    <div class="item">
    <div class="slide2"></div>
    <div class="carousel-caption">
      <h3>ARod</h3>
      <p>Slide 2</p>
    </div>
    </div>
    <div class="item">
    <div class="slide3"></div>
    <div class="carousel-caption">
      <h3>AR</h3>
      <p>Slide 3</p>
    </div>
    </div>
</div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>

【问题讨论】：

标签： html css carousel

【解决方案1】：

$('#theCarousel').carousel({
				interval: 2000
			})

slide1{
background-image: url('http://a.fssta.com/content/dam/fsdigital/fscom/nfl/images/2014/12/09/120914-3-NFL-Packers-Aaron-Rodgers-OB-PI.vresize.1200.675.high.64.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.slide2{
background-image: url('http://www.greenbaypackernation.com/wp-content/uploads/2016/08/aaron-rodgers-packers.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.slide3{
background-image: url('http://sporrepor.com/wp-content/uploads/2015/12/Aaron-Rodgers.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>

<div id="theCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
    <div class="slide1"></div>
    <div class="carousel-caption">
      <h3>Aaron Rodgers</h3>
      <p>Slide 1</p>
    </div>
    </div>
    <div class="item">
    <div class="slide2"></div>
    <div class="carousel-caption">
      <h3>ARod</h3>
      <p>Slide 2</p>
    </div>
    </div>
    <div class="item">
    <div class="slide3"></div>
    <div class="carousel-caption">
      <h3>AR</h3>
      <p>Slide 3</p>
    </div>
    </div>
     <ol class="carousel-indicators">
    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#theCarousel" data-slide-to="1"></li>
    <li data-target="#theCarousel" data-slide-to="2"></li>
  </ol>
</div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>

这是你没有添加引导 css 的工作代码

【讨论】：

哇，谢谢。不敢相信我忘记了这么简单的事情。我正在浏览 freecodecamp.com，我确信它说会在 Codepen 中预加载。显然不是。再次感谢！

【解决方案2】：

添加引导 CSS 文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


.slide1{
background-image: url('http://a.fssta.com/content/dam/fsdigital/fscom/nfl/images/2014/12/09/120914-3-NFL-Packers-Aaron-Rodgers-OB-PI.vresize.1200.675.high.64.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.slide2{
background-image: url('http://www.greenbaypackernation.com/wp-content/uploads/2016/08/aaron-rodgers-packers.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.slide3{
background-image: url('http://sporrepor.com/wp-content/uploads/2015/12/Aaron-Rodgers.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

https://jsfiddle.net/b237af1u/

【讨论】：