jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

Question

Eu estou olhando para implementar a rolagem horizontal utilizando jQuery.SerialScroll (com base on jQuery.ScrollTo ).

Eu tenho atualmente um scrolling horizontal contínua trabalhando com liScroll como eu discutir em este post .

No entanto, agora eu preciso de rolagem discreto e tenho SerialScroll funcionando perfeitamente para rolagem vertical.

Por alguma razão, se a propriedade 'eixo' é especificado como 'x' nada acontece.

Não consigo mesmo começar a exemplo SerialScroll para direita para a esquerda scrolling ao trabalho.

Eu tenho HTML assim:

<div id="pane">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
</div>

Eu tenho jQuery como este, que funciona quando eixo é '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);
   });

Todas as idéias?

// Edit (resposta aceita)

Para aqueles que vêm junto, a resposta aceita se livrar da necessidade de "serialScroll" (só precisa scrollTo). Heights não eram exigidas. Certifique-se de mudar $ ( 'scroller') para algo como $ ( 'mywrap') ou $ (target.parent (). Parent ()). Você também pode configurar a rolagem automática como esta:

 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);

substituindo #news li ul para seu seletor apropriado.

Answer 1

Eu estava trabalhando recentemente com scrollTo para implementar um Coda-como assistente slider.

Eis os passos que tomou:

1. Definir um contendo div com as dimensões que queria o controle deslizante para aparecer como. overflow: auto; ajuda para testes, mas você provavelmente vai querer usar overflow: hidden no final
.
2. Dentro desse lugar outra div, torná-lo grande o suficiente para armazenar todos os seus elementos horizontalmente.
3. Float os painéis. dar-lhes dimensões explícitas.

O meu 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;} 

Meu JS:

function sliderScroll(target){
  if(target.length <1)return false;
  $(".current").removeClass("current");
  target.addClass("current");
  $(".scroller").scrollTo(target,500,{axis:'x'});
  return false;
}

O meu HTML:

<div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>