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

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 http://codepen.io/Jarolin/pen/mlzJh

@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).

> 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

This.

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: http://codepen.io/CrocoDillon/pen/lozFt

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

It appears to be a bug with jQuery animate only in Chrome: http://bugs.jquery.com/ticket/5565 … 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.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.