Approach for doing an infinite carousel.

[fess]

Hi,

I have a project which we're trying to do in angular. At it's heart it's an image viewer, and there's the mode where we want to scroll single images on/off screen left to right, "detail view", having them animate on and off screen. On touch devicesi, ideally, we'd like it to work exactly as someone expects; drag a little and it moves with your drag, release it goes back, drag enough and it's a swipe to the next/previous. Though for starters I was just going to try binary css transitions.

one possible catch is that the list of images to scroll through is potentially infinite, and not a small fixed list.

Is this something that can be done with regular angular directives? or would you suggest a custom directive? one Idea I was toying with trying first is to have an array of the prev, current, next images in the scope. the template displays this using ngrepeat to show the three of them. and use ngrepeat's animations to handle the change to the list. any other advice?

This seems like something that has probably been done by people before. any examples out there?

Thanks in advance.

--fess

[mark prades]

You can do anything with directives , the question is ,does it make sense to develop that kind of widget from scratch ,for angular only ,where there are some many free carousels available , that you can integrate with angular with a single directive.

[Miguel Ping]

If you want infinite swipe only on one direction, you can use https://github.com/revolunet/angular-carousel (last time I checked it supported infinite scrolling in one dir).

If you want infinite scrolling in two directions (left/right), you can do as you suggest and manipulate the left offset and the margin/translate3d position to emulate an infinite scrolling list both ways.

I have done this in a personal project, but the code is not production ready.

[fess]

Thanks. You've just made me realize that I had this mindset, that integrating non angular things with angular would be the really hard way to go about things. Perhaps that's not true. Know of any good examples of non angular widgets integrated with angular?

--fess

On Jun 28, 2013, at 3:04 AM, mark prades wrote:

> You can do anything with directives , the question is ,does it make sense to develop that kind of widget from scratch ,for angular only ,where there are some many free carousels available , that you can integrate with angular with a single directive.
>
>

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>