Scorrimento orizzontale jQuery.ScrollTo / jQuery.SerialScroll

Question

Sto cercando di implementare lo scorrimento orizzontale usando jQuery.SerialScroll (basato su jQuery.ScrollTo ).

Attualmente ho uno scorrimento orizzontale continuo che funziona con liScroll, come discuto in questo post .

Tuttavia, ora ho bisogno di uno scorrimento discreto e SerialScroll funziona perfettamente per lo scorrimento verticale.

Per qualche motivo, se la proprietà 'axis' è specificata come 'x' non succede nulla.

Non riesco nemmeno a ottenere l'esempio SerialScroll da destra a sinistra scorrere per funzionare.

Ho HTML come questo:

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

Ho jQuery come questo, che funziona quando l'asse è '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);
   });

Qualche idea?

// Modifica (risposta accettata)

Per quelli che arrivano, la risposta accettata elimina la necessità di " serialScroll " (basta scorrere per). Le altezze non erano richieste. Assicurati di cambiare $ ('scroller') in qualcosa come $ ('mywrap') o $ (target.parent (). Parent ()). Puoi anche impostare lo scorrimento automatico in questo modo:

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

sostituendo #news ul li nel selettore appropriato.

Answer 1

Di recente ho lavorato con scrollTo per implementare una procedura guidata di scorrimento simile a Coda.

Ecco i passi che ho fatto:

1. Imposta un div contenente sulle dimensioni in cui volevo apparire il cursore. overflow: auto; aiuta per i test, ma probabilmente vorrai usare l'overflow: nascosto alla fine.
2. All'interno di quel posto un altro div, rendilo abbastanza grande da contenere tutti i tuoi elementi in orizzontale.
3. Galleggia i pannelli. dare loro dimensioni esplicite.

Il mio 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;} 

My JS:

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

Il mio HTML:

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