导航栏无法正常运行（Bootstrap v3）

Question

My nav bar is not behaving correctly. It displays the 3 slider images all in a vertical row at the same time and doesn't slide through the pictures. The CSS used is that of twitter bootstrap. I have my own CSS in there but none that affect the carousel, also no added javascript, just the Jquery and the bootstrap.js. This is the bootstrap V3. any idea?

<div class="container">
   <div id="carousel-example-generic" class="carousel slide">
      <ol class="carousel-indicators">
         <li data-target="#carousel-example-generic" data-   
            slide-to="0" class="active"></li>
         <li data-target="#carousel-example-generic" data-
            slide-to="1"></li>
         <li data-target="#carousel-example-generic" data-
            slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
         <div class="item active">
            <img src="img/timthumb.jpg" alt="...">
            <div class="carousel-caption">
               <p>Eyes of the owl</p>
            </div>
         </div>
         <div class="item active">
            <img src="img/timthumb.jpg" alt="...">
            <div class="carousel-caption">
               <p>Eyes of the owl</p>
            </div>
         </div>
         <div class="item active">
            <img src="img/timthumb.jpg" alt="...">
            <div class="carousel-caption">
               <p>Eyes of the owl</p>
            </div>
         </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-
         example-generic" data-slide="prev">
      <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#carousel-
         example-generic" data-slide="next">
      <span class="icon-next"></span>
      </a>
   </div>
</div>

Answer 1

Your issue seems to be that you have specified active class for all the slides. Specify only for the first one to start with. Specifying active for all of them makes all of them visible and its selector which switches through the slides (not active item which is prev or next on click of buttons fails to pick up anything else) fails to select as there is nothing with non active is available anymore.

            <div class="item active">
                <img src="http:\\placehold.it\32x100" alt="..." />
                <div class="carousel-caption">
                    <p>Eyes of the owl</p>
                </div>
            </div>
            <div class="item"> <!-- removed active class from here -->
                <img src="http:\\placehold.it\42x100" alt="..." />
                <div class="carousel-caption">
                    <p>Eyes of the owl</p>
                </div>
            </div>
            <div class="item"><!-- removed active class from here -->
                <img src="http:\\placehold.it\52x100" alt="..." />
                <div class="carousel-caption">
                    <p>Eyes of the owl</p>
                </div>
            </div>

Fiddle