How to make jQuery slider scroll only one item instead of three?

Question

I've got a jQuery slider on my site. I used a tutorial in the process, but this slider is setup to scroll three items, but I would like it to just scroll one at a time onClick. Other than this, it works beautifully.

I see that this is because the ".pane" div wraps two sets of three items (which is two different unordered lists). However, when I change the ".pane" to wrap each individual item (li), it doesn't work.

Any thoughts on the easiest way to solve this?

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

Question: Did you wrap each individual li (like you said) or did you wrap the ul->li->/li->/ul? In other words, was each individual li wrapped in a ul when you tried it? — jk., May 20 '11 at 00:30
Sure -- here you go: [link](http://www.pac-10.org/portals/7/images/Pac-10/misc/slider/) — Nic, May 20 '11 at 00:57
I think you need to set it up like the slideshow demo: http://demos.flesler.com/jquery/serialScroll/ — jk., May 20 '11 at 01:28

score 1 · Answer 1 · answered May 20 '11 at 02:10

1

Change items property in the scrollOptions variable to the items theirself, e.g. to$('.thumbnail_wrapper .pane2') as in your demo:

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

answered May 20 '11 at 02:10

sanmai

29,083
12
64
76

Ahh, I tried that (that's why the pane2 class was added to the li's), and it doesn't work. – Nic May 20 '11 at 22:49
Okay - I've got it scrolling one item at a time now. I made it only one UL, and made each li stay with a .pane div. However, now all the scrolling is messed up when it gets to the end!I'd like to just to be an infinite carousel (or rewind to the beginning.) Here's the link: http://www.pac-10.org/portals/7/images/Pac-10/misc/slider/ – Nic May 20 '11 at 23:02

How to make jQuery slider scroll only one item instead of three?

1 Answers1