Javascript 画廊滑块垂直堆叠图像，而不是水平堆叠图像+；键盘输入不是'；行不通

我目前正在用Javascript开发一个简单的图库，通过键盘控制输入来移动图库图像。jSFiddle显示了代码，但出于某种原因，滑块在jSFiddle上不起作用，但在我的localhost MAMP服务器上起作用

问题是我无法让网格中的图像停止垂直堆叠。我看过UL LI css，它似乎不起作用，使LI图像垂直浮动在每个图像的顶部

我的另一个问题是，我如何告诉Javascript的gridSize变量为响应web目的而更改，因为1100对于某些屏幕来说太大了

滑块的Javascript。 $（窗口）.load（函数（）{

HTML

---

我做错了什么？谢谢。

美元（document.ready（）怎么样相反？@PsychHalf哦，奇怪。我尝试过使用它提供的最新jQuery构建，但仍然没有任何结果。：/@Ahmad谢谢！现在所有东西都不是垂直堆叠的，现在我只需要弄清楚rwd的内容和键盘输入：P

未捕获引用错误：gridWith未定义

@Monstr92很好，值得投票吗？

 var image = $('img'); 
 var theWidth = image.width();
 var gridSize = -1100;
 var grid;
 var totalWidth = image.length * theWidth; 

$('ul.grid').css({ 
  width: function(){ 
  return totalWidth;     
}    
});

$('#back').click(function() {
if(gridSize - theWidth != -totalWidth) {
  grid = gridSize + 1100;
} else {
  grid = 0;
};
updatePosition();
});

$('#page').click(function(){
if(gridSize != 0) {
  grid = gridSize - 1100;
} else {
  grid =  0;
};
updatePosition();
});


var updatePosition = function() {
$('ul.grid').animate({ "margin-left": (grid)}, 650);
    gridSize = -1100;
}

$(document).keydown(function(e) {
if (e.keyCode == 39) {
    updatePosition();
}
else if (e.keyCode == 37) {
    grid = gridSize + 1100;
}
})

});

  <div class="grid-wrap">
   <ul class="grid">
    <li>
        <img src="http://f.cl.ly/items/363B3w2S0c3y22100R2D/img1.png">
    </li>
    <li>
        <img src="http://f.cl.ly/items/09110S1L2t2X0K0J1d1D/img2.png">
    </li>
    <li>
        <img src="http://f.cl.ly/items/0L152B400u0d0k1g2a1e/img3.png">
    </li>
    </ul>
 </div>

  <div id="btns">
     <div class="forward"></div>
     <div class="back"></div>
  </div>

  .grid-wrap {
     background: #FFF;
     margin: 0 auto;
     overflow: hidden;
     width: 600px;
 }
ul.grid li {
    display: inline;
    list-style: none;
 }