Bootstrap Carousel not working correctly

Question

This time it's my carousel giving me trouble. It should be normal but I don't know why it isn't working. I saw this in a site, in here: http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/

Here's my codeply link: http://www.codeply.com/go/YPBXy1HmC8 and here is my html/css code:

    <!-- 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

You're missing some closing </div> tags inside of <div class="carousel-inner" role="listbox">