jQuery.ScrollTo / jQuery.SerialScroll Горизонтальная прокрутка - PullRequest
Новая
       28

jQuery.ScrollTo / jQuery.SerialScroll Горизонтальная прокрутка

4 голосов
/ 17 октября 2008

Я хочу реализовать горизонтальную прокрутку с использованием jQuery.SerialScroll (на основе 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 на ваш соответствующий селектор.

1 Ответ

11 голосов
/ 18 октября 2008

Недавно я работал с scrollTo для реализации мастера создания слайдеров, похожих на Coda.

Вот шаги, которые я предпринял:

  1. Установите содержащий div для размеров, которые я хотел, чтобы ползунок отображался как. переполнение: авто; помогает при тестировании, но вы, вероятно, захотите использовать переполнение: в конце скрыто.
  2. Внутри этого места еще один div, сделайте его достаточно большим, чтобы держать все ваши элементы горизонтально.
  3. Плавающие панели. дать им явные размеры.

Мой 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>
...