jQuery.ScrollTo / jQuery.SerialScroll Défilement Horizontal

Je suis à la recherche pour mettre en œuvre le défilement horizontal à l'aide de jQuery.SerialScroll (basé sur jQuery.ScrollTo).

J'ai actuellement un continue de défilement horizontal de travail avec liScroll comme je l'ai discuter dans ce post.

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

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

Je ne peux même pas obtenir le SerialScroll exemple de droite à gauche défilement de travail.

J'ai le 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);
   });

Des idées?

//Edit (réponse acceptée)

Pour ceux qui viennent, de la accepté de répondre à se débarrasser de la nécessité d'une "serialScroll" (juste besoin de scrollTo). Hauteurs n'étaient pas nécessaires. Assurez-vous de changer $('scroller') à quelque chose comme $('mywrap') ou $(cible.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);

remplacement de #news ul li à votre sélection.

OriginalL'auteur Matt Mitchell | 2008-10-17

  1. 11

    J'ai été récemment travaillé avec scrollTo de mettre en œuvre une Coda-comme curseur de l'assistant.

    Voici les étapes que j'ai pris:

    1. Définir un div contenant les dimensions que je voulais que le curseur apparaisse comme. overflow:auto; aide pour les tests, mais vous voudrez probablement utiliser overflow:hidden à la fin.
    2. À l'intérieur de cet endroit une autre div, le rendre assez grand pour contenir tous vos éléments horizontalement.
    3. Flotter les panneaux. leur donner explicite dimensions.

    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 code HTML:

    <div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>
    Super! - Pour ceux qui sont intéressés veuillez voir mes modifications dans la question pour quelques modifications mineures.

    OriginalL'auteur Jethro Larson