jQuery.scrollTo / jQuery.Сериалы прокручивают горизонтальную прокрутку
-
03-07-2019 - |
Вопрос
Я хочу реализовать горизонтальную прокрутку с помощью jQuery.Прокрутка серий (на основе jQuery.scrollTo).
В настоящее время у меня есть непрерывная горизонтальная прокрутка, работающая с liScroll, как я обсуждаю в этот пост.
Однако теперь мне нужна дискретная прокрутка, и у меня есть SerialScroll, который идеально работает для вертикальной прокрутки.
По какой-то причине, если свойство 'axis' указано как 'x', ничего не происходит.
Я даже не могу понять, Пример SerialScroll для прокрутки справа налево на работу.
У меня есть HTML, подобный этому:
<div id="pane">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
У меня есть такой jQuery, который работает, когда ось 'y'
jQuery(function($) {
var $pane = $('#pane');
$pane.serialScroll({
items: 'div',
next: $pane, // the container itself will get bound
duration: 2100,
force: true,
axis: 'x',
step: 1, //scroll 1 news each time
event: 'showNext' //just a random event name
});
setInterval(function() {//scroll each 12 seconds
$pane.trigger('showNext');
}, 12000);
});
Есть какие-нибудь идеи?
//Редактировать (ответ принят)
Для тех, кто приходит, принятый ответ избавляет от необходимости "serialScroll" (просто нужен scrollTo).Высота не требовалась.Обязательно измените $('scroller') на что-то вроде $('mywrap') или $(target.parent().parent()).Вы также можете настроить автоматическую прокрутку следующим образом:
var index = 2;
setInterval(function() {//scroll each 5 seconds
index = index > $('#news ul li').length ? 1 : index;
sliderScroll($('#news ul li:nth-child(' + index + ')'));
index ++;
}, 5000);
замените #news ul li на соответствующий вам селектор.
Решение
Недавно я работал с scrollTo над реализацией мастера слайдеров, похожего на коду.
Вот шаги, которые я предпринял:
- Установите содержащий div в те размеры, в которых я хотел, чтобы ползунок отображался.переполнение: автоматическое;помогает при тестировании, но вы, вероятно, захотите использовать overflow:hidden в конце.
- Внутри этого разместите еще один div, сделайте его достаточно большим, чтобы все ваши элементы располагались горизонтально.
- Поднимите панели в воздух.дайте им четкие размеры.
Мой CSS:
.scroller{
position: relative;
overflow: hidden;
height: 410px;
width: 787px;}
.modal-content{width: 3400px;}
.modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;}
Мой JS:
function sliderScroll(target){
if(target.length <1)return false;
$(".current").removeClass("current");
target.addClass("current");
$(".scroller").scrollTo(target,500,{axis:'x'});
return false;
}
Мой HTML- код:
<div class="scroller">
<div class="modal-content">
<div>...</div>
...
</div>
</div>