Défilement horizontal jQuery.ScrollTo / jQuery.SerialScroll

Question

Je souhaite implémenter le défilement horizontal à l'aide de jQuery.SerialScroll (basé sur sur jQuery.ScrollTo ).

J'ai actuellement un défilement horizontal continu avec liScroll, comme indiqué dans cet article .

Cependant, il me faut maintenant le défilement discret et SerialScroll fonctionne parfaitement pour le défilement vertical.

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

Je ne parviens même pas à obtenir le exemple SerialScroll pour le droit de gauche à droite faire défiler pour fonctionner.

J'ai HTML comme ceci:

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

J'ai jQuery comme ça, ça marche quand 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);
   });

Des idées?

// Modifier (réponse acceptée)

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

 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 de curseur semblable à Coda.

Voici les étapes que j'ai suivies:

1. Définissez un div contenant les dimensions pour lesquelles je souhaitais que le curseur apparaisse. débordement: auto; aide pour les tests, mais vous voudrez probablement utiliser overflow: caché à la fin.
2. À l'intérieur de cet endroit, placez un autre div, rendez-le assez grand pour que tous vos éléments soient horizontaux.
3. Flottez 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;} 

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