圖像滑塊不工作（jQuery） - Rails 3項目

Question

我試圖設置一個圖像滑塊使用jquery bootstrap旋轉木馬。

它似乎很好，除了滑塊不工作。當我點擊「下一步」箭頭時，圖像不會改變。

我在做什麼錯？

最良好的祝願，

費薩爾

---

JavaScript文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/assets/jquery.js"></script> 
<script src="/assets/bootstrap-carousel.js"></script> 

SCRIPT通過我打電話BOOTSTRAP輪轉

<script> 
$(function() { 
// $('.carousel').carousel({ interval: 2000 }) 

    $('#myCarousel').carousel() 
     }); 
</script> 

VIEW

<div id="myCarousel" class="carousel"> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
    <div class="active item"> 
    …<img src="/assets/us1.jpg" style="height="200", width="200"> 
    </div> 
    <div class="item"> 
    …<img src="/assets/us2.jpg" style="height="200", width="200"> 
    </div> 
    </div> 

    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

Answer 1

我想你需要你引用轉盤的ID，在未來/上一個鏈接，像這樣：

編輯：嗯，你有很多錯別字，你圖像樣式無效。通常我甚至不需要在js中叫出輪播，我只是給他們所有獨特的ID。

我會仔細看看文檔http://twitter.github.com/bootstrap/javascript.html#carousel

<div id="myCarousel" class="carousel"> 

<!-- Carousel items --> 
<div class="carousel-inner"> 
    <div class="active item"> 
    <img src="/assets/us1.jpg" height="200" width="200"> 
    </div> 
    <div class="item"> 
    <img src="/assets/us2.jpg" height="200" width="200"> 
    </div> 
</div> 

<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

那麼複製粘貼到您的看法......它應該工作開箱，如果您有jQuery的加載。

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""> 
     <div class="carousel-caption"> 
      <h4>First Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
     </div> 
     <div class="item"> 
     <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""> 
     <div class="carousel-caption"> 
      <h4>Second Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
     </div> 
     <div class="item"> 
     <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""> 
     <div class="carousel-caption"> 
      <h4>Third Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div>