javascript - クエリを使用した画像の水平スクロール

Question

ここにあるような横スクロールの画像スライダーを実装したいと思います

例のように画像をスクロールできません。これは、iPhone の画面解像度のみを対象としています。

これが私のコードです: http://jsfiddle.net/AYj6w/

<script type="javascript">$(document).ready(function() {
$('#product-image').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});
});
</script>

<ul id="scroller">
<li><img src="img/products/black-couch.jpg"></li>
<li><img src="img/products/brown-couch.jpg"></li>
<li><img src="img/products/red-couch.jpg"></li>
</ul>


#scroller {
float: left;
width: 90%;
height: 77px;
}

#scroller ul {
width: 100%;
}

#scroller li {
list-style: none;
float: left;
width: 122px;
height: 71px;
}

#scroller img {
width: 100%;
height: 100%;
float: left;
}