jQuery.ScrollTo/jQuery.SerialScroll Défilement horizontal

Question

Je cherche à implémenter le défilement horizontal en utilisant jQuery.SerialScroll (basé sur jQuery.ScrollTo).

J'ai actuellement un défilement horizontal continu fonctionnant avec liScroll comme je l'explique dans this post.

Cependant, maintenant j'ai besoin de défilement discret et j'ai SerialScroll fonctionnant parfaitement pour le défilement vertical.

Pour une raison quelconque, si la propriété 'axis' est spécifiée comme 'x', rien ne se passe.

Je n'arrive même pas à faire fonctionner le SerialScroll example for right to left scrolling.

je HTML comme ceci:

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

J'ai jQuery comme ça, qui fonctionne lorsque l'axe est '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); 
    }); 

Toutes les idées?

// Modifier (réponse acceptée)

Pour ceux qui viennent, la réponse acceptée se débarrasse de la nécessité de « serialScroll » (juste besoin scrollTo). Les hauteurs n'étaient pas nécessaires. Assurez-vous de changer $ ('scroller') à quelque chose comme $ ('mywrap') ou $ (target.parent(). Parent()). Vous pouvez également configurer le défilement automatique comme ceci:

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

en remplaçant #news ul li par votre sélecteur approprié.

Answer 1

Je travaillais récemment avec scrollTo pour implémenter un assistant curseur Coda.

Voici les étapes de mon travail:

1. Définir un contenant div aux dimensions que je voulais le curseur pour apparaître comme. débordement: auto; aide à tester, mais vous aurez probablement besoin d'utiliser overflow: caché à la fin.
2. A l'intérieur, placez une autre div, faites en sorte qu'elle soit assez grande pour contenir tous vos éléments horizontalement.
3. Flotter les panneaux. donnez-leur des dimensions explicites.

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

Mes JS:

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

Mon HTML:

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