not - jQuery.ScrollTo/jQuery.SerialScroll Desplazamiento horizontal

scrollto is not a function

Question

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

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

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

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

Ni siquiera puedo hacer funcionar el ejemplo de SerialScroll para el desplazamiento de derecha a izquierda .

Tengo HTML así:

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

Tengo jQuery así, que funciona cuando axis 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);
});

¿Algunas ideas?

// Editar (respuesta aceptada)

Para aquellos que vienen, la respuesta aceptada elimina la necesidad de "serialScroll" (solo necesita scrollTo). Las alturas no fueron requeridas. 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);

reemplazando #news ul li a su selector apropiado.

Answer 1

Hace poco estuve trabajando con scrollTo para implementar un asistente deslizante tipo Coda.

Aquí están los pasos que tomé:

1. Establezca un div que contiene las dimensiones en las que quería que aparezca el control deslizante. desbordamiento: automático; ayuda a probar, pero es probable que desee utilizar el desbordamiento: oculto al final.
2. Dentro de ese lugar, otro div, hazlo lo suficientemente grande como para mantener todos tus elementos horizontalmente.
3. Flota los paneles. darles 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>