如何使jQuery滑块只滚动一个项目而不是三个项目

Question

我的网站上有一个jQuery滑块。我在此过程中使用了教程，但此滑块设置为滚动三个项目，但我希望它在单击时一次只滚动一个。除此之外，它工作得很好。

我看到这是因为".pane"div 包装了两组三个项目（这是两个不同的无序列表）。但是，当我更改".pane"以包装每个单独的项目 （li） 时，它不起作用。

关于解决此问题的最简单方法的任何想法？

<div class="thumbnail_wrapper">
    <div class="left-tab">
        <img class="left" src="images/left-arrow.png" alt="Previous" />
    </div>
    <div class="holder">
        <div class="home_slider">
            <div class="pane"><ul>
                    <li class="post first showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>

                    <li class="post showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>

                    <li class="post showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>
            </ul></div><div class="pane"><ul>
                    <li class="post first showDetails">
                        <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>

                    <li class="post showDetails">
                    <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>

                    <li class="post showDetails">
                    <a href="#"><img src="images/thumbnails/red.jpg" alt="" /> 
                        <div class="details_wrapper">
                            <div class="details">
                            <h3>Basketball Tournament</h3>
                            <h4>Visit Tournament Central</h4>
                            </div>
                        </div>
                        </a>
                    </li>
            </ul></div>             
            <div class="clear"></div>
        </div>
    </div>  
    <div class="right-tab">
        <img class="right" src="images/right-arrow.png" alt="Next" />
    </div>
</div>

Answer 1

将

scrollOptions变量中的items属性更改为自己的项目，例如，像演示中那样更改为$('.thumbnail_wrapper .pane2')：

var scrollOptions = {
    /* skip */
//  items: $panes,
    items: $('.thumbnail_wrapper .pane2'),
    /* skip */
};