讓旋轉木馬停止

Question

我有一個旋轉木馬與三個<section>元素。就像這樣：

<div role="main" class="main selection-carousel"> 
    <section> 
     <h1>Kies je <span class="right">favoriete</span> Smaak</h1> 
     <aside class="aside"> 
     </aside> 
    </section> 

    <section> 
     <h1>Item 2</h1> 
     <aside class="aside"> 
     </aside> 
    </section> 

    <section> 
     <h1>Item 3</h1> 
     <aside class="aside"> 
     </aside> 
    </section> 

    <img src="static/img/bg-selection-carousel.png" width="2610" height="600" alt="" class="carousel-image">  
    <a href="#" title="Ga naar de volgende thee smaak" class="carousel-left">Ga naar de volgende thee smaak</a> 
    <a href="#" title="Ga naar de vorige thee smaak" class="carousel-right">Ga naar de vorige thee smaak</a> 
</div> 

當你點擊<a> .carousel左。 <img>左移-1000像素。第二部分是展示。當你點擊旋轉木馬的權利。圖像右移1000個像素。以前的部分是展示。

但我有旋轉木馬按鈕的問題。當我在第一部分。然後，您不能右鍵單擊傳送帶。我怎麼能做到這一點？

當我在第一部分。旋轉木馬右鍵隱藏。當我在最後一節。應該隱藏旋轉木馬。

謝謝！

這是我的javascript：

$(function() { 
    var background = $(".carousel-image") 
     buttonLeft = $(".carousel-left") 
     buttonRight = $(".carousel-right"); 

    $("section").hide(); 
    $("section:first").show(); 

    buttonLeft.click(function (e) { 
     e.preventDefault(); 
     background.animate({ left: "-=1000px" }, 1100, "easeOutQuad", function() { 
      $("section:visible").hide().next().fadeIn(600); 
     }); 
    }); 

    buttonRight.click(function (e) { 
     e.preventDefault(); 
     background.animate({ left: "+=1000px" }, 1100, "easeOutQuad", function() { 
      $("section:visible").hide().prev().fadeIn(600); 
     }); 
    }); 
}); 

Answer 1

我做了一個類似旋轉木馬的位置：http://jsbin.com/abape3/14

如果你'你section在我的示例S的更換input，並調整它略微你應該能夠使其工作。