The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

How do i stop Jquery animation “+=” when this is limited

  • Anonymous
    # May 2, 2013 at 11:03 pm

    i’m working on this slider that slides div to the left or right. I want it to stop when there is no other div to go to next. How do i achieve that? Here is what i have for example

    # May 3, 2013 at 2:48 pm


    # May 3, 2013 at 5:09 pm

    @Jarolin What makes it difficult to give you an answer is that slides are traditionally within a container and that container is positioned instead of the slides themselves, if you want to float the slides.

    What the demo above does is position each slide separately. And also, because the slides aren’t wrapped, you can’t for example have 10 slides in a row, because extra slides would either wrap to the next line or make the document extend beyond the browser window (scroll bar to the right).

    More traditional markup with overflow hidden would allow for that, [something like this](

    # May 3, 2013 at 6:51 pm

    > What makes it difficult to give you an answer is that slides are traditionally within a container and that container is positioned instead of the slides themselves


    I would however keep track of the current index and for example go to left only `if (index > 0)` and go to right only `if (index < $('.field').length - 1)` or something (length from a var, this is just an example). You can then slide to that field using the same jQuery as I used here:

    @Mottie, your implementation comparing the position fails if you click the next button repeatedly, that’s why I like comparing to something that doesn’t change during the animation.

    # May 3, 2013 at 8:58 pm

    @CrocoDillon @Mottie These both work great. but i would want the user to navigate back and forth, Not just one way.

    # May 3, 2013 at 9:09 pm

    I guess you’re referring to my Pen, only linked that for the animate part ;p It was easier than creating a new Pen. The only difference with going back is you decrement the index instead of increment.

    # May 3, 2013 at 9:22 pm

    @CrocoDillon Huh?. Sorry i’m kind of a Jquery noob and am not really sure what you meant by that.

    # May 3, 2013 at 9:30 pm

    Yeah, @CrocoDillon was right, I should have just used an index ;)

    I’ve updated [my demo](

    # May 4, 2013 at 12:31 pm

    @Mottie Will i be able to add new panels and it will slide them normally too?

    # May 4, 2013 at 3:14 pm

    @Jarolin: with the update I just made, yes… it now resizes the `#insidewrapper` to fit all of the slides inside.

    # May 4, 2013 at 4:37 pm

    @Mottie Thank’s for all your help. I applied the Jquery and it’s working great. Although there is one problem. When i zoom out and navigate through the slides it delocates. and things get alittle weird. Is there a solution to this problem?

    # May 4, 2013 at 10:16 pm

    Is there a way of fixing that or no?

    # May 4, 2013 at 10:26 pm

    It looks like the width of the slides are 1285px but the container is set to 95%… that’s why there is an inconsistency.

    Now you see why it’s easier to use a plugin instead of writing your own.

    To fix it you’ll need to get the window size and change the width of all of the slides, then bind to the window resize event, but make sure it is throttled, to re-adjust the slide sizes.

    # May 4, 2013 at 10:41 pm

    @Mottie haven’t found an ideal plug-in for what i’m trying to do.

    # May 5, 2013 at 5:34 am

    It appears to be a bug with jQuery animate only in Chrome: … you can try to use jQuery just to set the `left` (and don’t use something like `left += width`, but keep a var keeping the current left value yourself) and use CSS transitions to handle the animation.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed