Я хотел бы реализовать боковой слайдер изображения с прокруткой, как тот, который был найден ЗДЕСЬ
Я не могу заставить мои изображения прокручиваться, как в примере. Это предназначено только для разрешения экрана 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;
}
В коде есть некоторые проблемы:
position: relative
Когда вы указываете width: 100%, это вычисляется для следующего родительского элемента с position: relative
. Поскольку у вас их нет, это означает все окно, возможно, не то, что вы хотите. Добавить position: relative
#scroller li
.
display: table-cell
Чтобы сделать список горизонтальным, вы можете определить элементы li с дисплеем: table-cell
white-space: nowrap
И чтобы эти элементы не были обернуты, используйте nowrap
overflow: scroll
Вам действительно не нужен jQuery, вы можете просто указать переполнение: прокрутите прокрутку-обертку, это заставит элемент прокручиваться автоматически
Я затронул все эти вопросы в этой скрипке