1

私のサイトには jQuery スライダーがあります。その過程でチュートリアルを使用しましたが、このスライダーは 3 つのアイテムをスクロールするように設定されていますが、onClick で一度に 1 つだけスクロールしたいと考えています。これ以外は、美しく機能します。

これは、「.pane」div が 3 つの項目の 2 つのセット (2 つの異なる順序付けられていないリスト) をラップしているためであることがわかります。ただし、「.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>
4

1 に答える 1

1

items変数のプロパティをscrollOptionsアイテム自体に変更$('.thumbnail_wrapper .pane2')します。たとえば、デモのように:

var scrollOptions = {
    /* skip */
//  items: $panes,
    items: $('.thumbnail_wrapper .pane2'),
    /* skip */
};
于 2011-05-20T02:10:00.870 に答える