jQuery.ScrollTo / jQuery.SerialScroll Desplazamiento horizontal

Question

Estoy buscando implementar el desplazamiento horizontal usando jQuery.SerialScroll (basado en jQuery.ScrollTo ).

Actualmente tengo un desplazamiento horizontal continuo trabajando con liScroll como lo discuto en esta publicación .

Sin embargo, ahora necesito un desplazamiento discreto y tengo SerialScroll funcionando perfectamente para el desplazamiento vertical.

Por alguna razón, si la propiedad 'axis' se especifica como 'x' no pasa nada.

Ni siquiera puedo obtener el ejemplo de SerialScroll de derecha a izquierda desplazamiento para trabajar.

Tengo HTML como este:

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

Tengo jQuery así, que funciona cuando el eje es '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);
   });

¿Alguna idea?

// Editar (respuesta aceptada)

Para aquellos que vienen, la respuesta aceptada elimina la necesidad de "serialScroll". (Solo necesito scrollTo). Las alturas no eran necesarias. Asegúrese de cambiar $ ('scroller') a algo como $ ('mywrap') o $ (target.parent (). Parent ()). También puede configurar el desplazamiento automático de esta manera:

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

reemplaza #news ul li a tu selector apropiado.

Answer 1

Recientemente estuve trabajando con scrollTo para implementar un asistente de control deslizante tipo Coda.

Aquí están los pasos que tomé:

1. Establezca un div que contenga las dimensiones en las que quería que apareciera el control deslizante. desbordamiento: auto; ayuda para la prueba, pero probablemente querrá usar desbordamiento: oculto al final.
2. Dentro de ese lugar, otro div, hazlo lo suficientemente grande como para sostener todos tus elementos horizontalmente.
3. Flota los paneles. Dales dimensiones explícitas.

Mi 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;} 

Mi JS:

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

Mi HTML:

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