jQuery.ScrollTo/jQuery.SerialScroll水平滚动

Question

我正在寻找使用jQuery.SerialScroll（基于jQuery.ScrollTo）实现水平滚动。

我目前有一个连续的水平滚动工作与liScroll，因为我在this post讨论。

但是，现在我需要离散滚动，并且我有Seri​​alScroll可以完美地用于垂直滚动。

由于某些原因，如果'axis'属性被指定为'x'，则不会发生任何事情。我不能让SerialScroll example for right to left scrolling工作。

我有HTML这样的：

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

我的jQuery这样，当轴 '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); 
    }); 

任何想法的作品？

//编辑（接受的答案）

对于那些一起走，接受的答案摆脱的需要“serialScroll”（只需要scrollTo）。高度不是必需的。请务必将$（'scroller'）更改为$（'mywrap'）或$（target.parent（）。parent（））。您也可以像这样设置自动滚动：

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

将#news ul li替换为适当的选择器。

Answer 1

我最近正在使用scrollTo来实现类似Coda的滑块向导。

这是我所采取的步骤：

1. 一个包含分区设置为我想要显示为滑块的尺寸。溢出：汽车;有助于测试，但您可能想要使用overflow：隐藏在最后。
2. 在那个地方放置另一个div，使它足够大以便水平放置所有元素。
3. 浮动面板。给他们明确的尺寸。

我的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;} 

我的JS：

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

我的HTML：

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