html - Bootstrap 轮播无法正常工作

Question

这次是轮播给我带来了麻烦。它应该是正常的，但我不知道为什么它不起作用。我在一个网站上看到了这个:http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

这是我的代码链接:http://www.codeply.com/go/YPBXy1HmC8，这是我的 html/css 代码:

    <!-- Wrap all page content here -->
<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Sugoi!</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="Anime"><a href="#Anime">Anime</a></li>
          <li class="Manga"><a href="#manga">Manga</a></li>
          <li class="Jogos"><a href="#Jogos">Jogos</a></li>
          <li class="Opiniao"><a href="#Opiniao">Opinião</a></li>
          <li class="Outros">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Outros <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">AMV</a></li>
              <li><a href="#">Cosplay</a></li>
              <li><a href="#">Passatempos</a></li>
            </ul>
        </li></ul>
            <ul class="pull-right nav navbar-nav">
          <li><a href="#about">Sobre</a></li>
          <li><a href="#contact">Contacto</a></li>
        </ul>
      </div>
    </div>
  </div>



  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sugoi!</h1>
    </div>
    <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>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
         <div style="background:url(http://imageslgmr.lazygamer.netdna-cdn.com/2014/11/Naruto.jpg) center center; 
          background-size:cover;" class="slider-size">
        <div class="carousel-caption">
            <a href="anime_1.com"><h3>Anime_1</h3>
            <p>Narutonaruto</p></a>
        </div>
    </div>

    <div class="item">
        <div style="background:url(http://images.akamai.steamusercontent.com/ugc/39731145643729554/AA0DFB3DDC16C2D344721953B646A8279AEBBA76/) center center; 
          background-size:cover;" class="slider-size">
        <div class="carousel-caption">
            <a href="Anime_2.com"><h3>Anime_2</h3>
            <p>Jojo</p></a>
      </div>
    </div>

    <div class="item">
        <div style="background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSwP_YYK55JaX9g7R9pZqVertNoGNwpxCTDBpZhGiOcvTTa_Af) center center; 
          background-size:cover;" class="slider-size">
            <div class="carousel-caption">
                <a href="Anime_3.com"><h3>Anime_3</h3>
                <p>One OUTS ONEOUTS</p></a>
        </div>
    </div>

    <div class="item">
        <div style="background:url(http://images7.alphacoders.com/302/302762.jpg) center center; 
          background-size:cover;" class="slider-size">
            <div class="carousel-caption">
                <a href="Anime_4.com"><h3>Anime_4</h3>
                <p>P3P3P3P3P3</p></a>
            </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>


    <!-- Content-->
    <div class="container">
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
    <p>TESTESTSTESTSTSTSTESTSET</p>
    <p>jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkmae jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkmajafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma</p>
    <p class="lead">...</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <!--Footer-->
 <div id="footer">
  <div class="container">
    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>
</div>

CSS

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  overflow: auto;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}

code {
  font-size: 80%;
}

.slider-size {
height: 400px; /* This is your slider height */
}
.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
}

Answer 1

你错过了一些关闭 </div> <div class="carousel-inner" role="listbox"> 内的标签