Question

我一直试图在过去几个小时内解决这个问题，我已经用Google搜索并搜索了本网站的任何解决方案，但任何提示或建议都无法解决问题。

我正在使用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>

Answer 1

添加Bootstrap 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/

Answer 2

$('#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>

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

bootstrap carousel不工作 - 图像只是堆叠

2 个答案: