滾動響應內容在溢出div

Question

我做了一個響應溢出容器與圖像，我想把2個按鈕，使動畫幻燈片左右。動畫必須停止到右側按鈕的最後一個圖像和左側按鈕的第一個圖像。

該網站是全屏，頁眉和頁腳50px高度和中間內容響應。

這是我的代碼。

樣式

html, body 
{ 
    min-height:100%; 
    padding:0; 
    margin:0; 
} 

#wrapper 
{ 
    padding:50px 0; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 

#content 
{ 
    height: 100%; 
    box-sizing: border-box; 
    overflow:scroll; 
    white-space:nowrap; 
    position:relative; 
    /*overflow-y: hidden;*/ 
} 

header 
{ 
    margin-top:-50px; 
    height:50px; 
    background-color:red; 
} 

footer 
{ 
    margin-bottom:-50px; 
    height:50px; 
    background-color:red; 
} 

.imagg 
{ 
    max-height:100%; 
    max-width: 100%; 
} 

    .container 
{ 
    background:#FF0; 
    position:absolute; 
    width:100% !important; 
    height:100% !important; 
    max-height:100% !important; 
} 

和HTML

<div id="wrapper"> 
<header></header> 
<div id="content"> 
    <div class="container"> 
     <img src="test.jpg" class="imagg" id="first" /> 
     <img src="test.jpg" class="imagg" /> 
     <img src="test.jpg" class="imagg" /> 
     <img src="test.jpg" class="imagg" /> 
     <img src="test.jpg" class="imagg" /> 
     <img src="test.jpg" class="imagg" /> 
     <img src="test.jpg" class="imagg" /> 
     <img src="test.jpg" class="imagg" id="last" /> 
    </div> 
</div> 
<button id="left">&laquo;</button> 
<button id="right">&raquo;</button> 

<script type="text/javascript"> 
    $("#right").click(function() { 
    $(".container").animate({ "left": "+=200px" }, "slow"); 
}); 

    $("#left").click(function() { 
    $("#container").animate({ "right": "-=200px" }, "slow"); 
}); 
</script> 
<footer></footer> 

Answer 1

var numOfSlide=3; 
var navigation=numOfSlide; 
$("#right").click(function() {  
    if(navigation<(numOfSlide+(numOfSlide-1))){ 
     $(".container").animate({ "left": "+=200px" }, "slow"); 
     navigation++; 
    } 
}); 

$("#left").click(function() { 
    if(navigation > (numOfSlide-(numOfSlide-1))){ 
     $(".container").animate({ "left": "-=200px" }, "slow"); 
     navigation--; 
    }  
}); 

檢查此琴：http://jsfiddle.net/fTnvE/