滑块有点问题我试图拼凑起来，但我无法弄清楚原因。希望有人能够指出最有可能是愚蠢的事情。
#slide1 {
background: url('../../images/captainShield.jpg') top center no-repeat;
}
#slide2 {
background: url('../../images/cinemaScreening.jpg') top center no-repeat;
}
#slide3 {
background: url('../../images/captainShield.jpg') top center no-repeat;
}<?php include('header.php') ?>
<div class="container" id="main">
<div class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol><!-- end carousel-indicators -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4>Richmond Movie Club</h4>
<p>A movie club for movie enthusiasts</p>
</div><!-- end carousel-caption -->
</div><!-- end item -->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4>Weekly Movie Screenings</h4>
<p>Richmond Movie Club hosts a weekly movie night playing movies based on member uploads and ratings</p>
</div><!-- end carousel-caption -->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4>Memberships open to public</h4>
<p>If you would like to know how to become a member use any of the contact options on the page</p>
</div><!-- end carousel-caption -->
</div><!-- end item -->
</div>
<!-- end carousel-inner -->
<!-- Controls -->
<a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
<a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
</div>
<!-- end myCarousel -->
之前有人问我是否正确链接了我的js和bootstrap文件是的，我有。模板和文件将从正常运行的项目中复制。
如果我以任何方式修改css来执行背景图像，那么滑块将显示并且工作完美。但是，只要我刷新页面，滑块就会消失，除非我更改css，否则我无法再将其恢复。
例如：
如果我将＃slide1更改为背景图片：然后立即将其更改回背景：然后滑块将显示在我的页面上。
我有点困惑为什么要这样做。
感谢任何帮助，谢谢。
答案 0 :(得分：1)
首先，你错过了负责动画部分的data-ride="carousel"属性。
您可以使用<img>中的<div class="item" ></div>标记来使其正常运行。如果您希望您的轮播图像作为背景图像有一些文字或类似的东西出现在它上面，您可以在<div class="carousel-caption"></div>内放置任何可以使您的轮播图像看起来像背景图像。
以下是工作示例 -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="main">
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol><!-- end carousel-indicators -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<img src='http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'>
<div class="carousel-caption">
<h4>Richmond Movie Club</h4>
<p>A movie club for movie enthusiasts</p>
</div>
<!-- end carousel-caption -->
</div><!-- end item -->
<div class="item" id="slide2">
<img src='http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg'>
<div class="carousel-caption">
<h4>Weekly Movie Screenings</h4>
<p>Richmond Movie Club hosts a weekly movie night playing movies based on member uploads and ratings</p>
</div><!-- end carousel-caption -->
</div><!-- end item -->
<div class="item" id="slide3">
<img src='http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg'>
<div class="carousel-caption">
<h4>Memberships open to public</h4>
<p>If you would like to know how to become a member use any of the contact options on the page</p>
</div><!-- end carousel-caption -->
</div><!-- end item -->
</div>
<!-- end carousel-inner -->
<!-- Controls -->
<a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
<a href="#myCarousel" class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
</div>
<!-- end myCarousel -->
</body>
</html>
修改
正如Markus在评论中所提到的，bootstrap-carousel确实与背景图像（我以前从未使用过）一起工作。所以我的上述答案工作正常，但如果你想将它与background-img css属性一起使用，你也可以这样做。谢谢马库斯！