Горизонтальная прокрутка изображения с помощью запроса

Я хотел бы реализовать боковой слайдер изображения с прокруткой, как тот, который был найден ЗДЕСЬ

Я не могу заставить мои изображения прокручиваться, как в примере. Это предназначено только для разрешения экрана 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;
}