Question

变得疯狂：D被困了三天。

我正在尝试在我的页面中放置一个旋转木马，我正在加载位于我的机器中的图像，每个图像的大小为1200 * 480。当我测试它时，图像不会显示。这是代码：

<div class="jumbotron">
  <h1>Kurt Angle</h1>
  <p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>

<!--CAROUSEL BEGINES-->
<div class="fluid-container">
  <div class="carousel slide"
       data ride="carousel"
       id="carousel">

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

    <!--wrapper of the images(itmes)--->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
      </div>

      <div class="item">
        <img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
             alt="slide2">
      </div>

      <div class="item">
        <img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
             alt="slide3">
      </div>
    </div>

    <!--now let's put right and left control-->
    <a class="left carousel-control" 
       href="#carousel" 
       role="button" 
       data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>

CSS:
.jumbotron{
  background-color: #241f14 !important;
  color: #ffffff;
  }

.carousel .item{
  height: 100%;

}

Codepen page

你能帮助我吗？

Answer 1

试试这个：

 <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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
        <div class="carousel-caption">
        </div>
      </div>

      <div class="item">
        <img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
        <div class="carousel-caption">
          <h3>Lorem</h3>
          <p>Lorem ipsum...</p>
        </div>
      </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>

DEMO HERE

没有加载Bootstrap轮播图像

1 个答案: