Carousel bootstrap

Bonsoir,

Je viens de commencer le jquery et j'essaye d'utiliser le carousel de bootstrap, mais je ne comprend pas pourquoi mais images se place l'une en dessous de l'autre.

Mes fichier js et boot sont bien charger ainsi que le css

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="css/style.css" /> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" /> 
    <link rel="icon" type="image/png" href="images/icon.ico"/>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

Le script pour lancer le js

<script type='text/javascript'>
    $(document).ready(function() {
         $('.carousel').carousel({
             interval: 2000
         })
    });    
</script>

et le html

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/images1.jpg" alt="dsdsd">
      <div class="carousel-caption">
       <h1>coucouc</h1>
       <h3>dsd</h3>
      </div>
    </div>



  <div class="item active">
      <img src="images/images2.png" alt="dsdsd">
      <div class="carousel-caption">
       <h1>coucouc</h1>
       <h3>dsd</h3>
      </div>
    </div>




      </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

J'ai chercher sur le net et essaye plusieurs méthode toute mais sans réussir.

Merci.