jQuery.ScrollTo / jQuery.SerialScroll Horizontales Scrollen

Question

Ich bin auf der Suche horizontales Scrollen implementieren mit jQuery.SerialScroll (basierend auf jQuery.ScrollTo ).

Im Moment habe ich eine kontinuierliche horizontalen Scrollen mit liScroll arbeiten, wie ich in diesen Beitrag .

Aber jetzt muss ich diskrete Scrollen und ich habe SerialScroll perfekt für vertikales Scrollen zu arbeiten.

Aus irgendeinem Grund, wenn die ‚Achse‘ Eigenschaft angegeben wird als ‚x‘ passiert nichts.

Ich kann nicht einmal bekommt das SerialScroll Beispiel für von rechts nach links Scrollen arbeiten.

Ich habe HTML wie folgt aus:

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

Ich habe jQuery wie dieses, das funktioniert, wenn Achse '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);
   });

Irgendwelche Ideen?

// Edit (Antwort akzeptiert)

Für diejenigen, die entlang kommen, wird die akzeptierte Antwort auf die Notwendigkeit befreien für „serialScroll“ (müssen nur scrollTo). Heights waren nicht erforderlich. Seien Sie sicher, $ ( 'scroller') so etwas wie $ ( 'mywrap') oder $ ändern (target.parent (). Parent ()). Sie können auch automatische Scrollen wie folgt aufgebaut:

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

ersetzt #news ul li zu Ihrem entsprechenden Selektor.

Answer 1

Ich war vor kurzem die Arbeit mit scrollTo eine Coda artigen Schieber Assistenten zu implementieren.

Hier sind die Schritte, die ich nahm:

1. Stellen Sie einen enthält div auf die Abmessungen ich den Regler so erscheinen wollte. Überlauf: auto; zum Testen hilft, aber Sie werden wahrscheinlich wollen Überlauf verwenden. am Ende versteckt
2. Innerhalb dieser Stelle ein anderes div, machen es groß genug, um alle horizontal Ihre Elemente zu halten.
3. die Platten Float. geben ihnen explizite Dimensionen.

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

Meine JS:

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

Meine HTML:

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