Infinite looping of children

[oyeanuj]

Hi @sag1v, thank you for creating this library!

Describe the solution you'd like
I'd love to be able to loop through to the first item, if I click on "next" from the last item, so creating an infinite loop of the children.

Describe alternatives you've considered
Maybe using an event handler to see if this is the last child, in which case onNext can call goTo with the first slide index?

[sag1v]

@oyeanuj Thanks.
This could be a great addition to react-elastic-carousel indeed!

Maybe using an event handler to see if this is the last child, in which case onNext can call goTo with the first slide index?

This is a relatively easy thing to do, however I think with this approach we will get a "backwards" animation and it won't feel like an infinite loop.

I think we should add copies or move slides to the next / prev positions to make it look infinite.
Of course we would need to consider all edge cases like 1 visible item vs 12 visible items for example.

Anyway PR's are more than welcome, so feel free to hop in. 👋

[PriyaJainDev]

How to enable infinite loop property?

[Anu-Ujin]

@sag1v How to enable infinite loop ? Is there any demo?

Is this pull request added? #17

[sag1v]

@Anu-Ujin #17 was not added, you can read my comment about it.

I am working on this feature these days (finally got some time to do it). I hope i can make it happen by the end of this month or next.

[christo-pr]

Not sure if it worth it (since @sag1v is already working on this feature) but for now I got it working with a bit of logic:

const itemsPerPage = 3
const items = [...]
const carouselRef = useRef(null);
const totalPages = Math.ceil(items.length / itemsPerPage)
let resetTimeout;

<Carousel
    ref={carouselRef}
    enableAutoPlay
    autoPlaySpeed={1500} // same time
    onNextEnd={({ index }) => {
         clearTimeout(resetTimeout)
         if (index + 1 === totalPages) {
            resetTimeout = setTimeout(() => {
               carouselRef.current.goTo(0)
           }, 1500) // same time
         }
    }}
    itemsToShow={itemsPerPage}
>
{items.map(() => ...)}
</Carousel>

This still doesn't feel like an infinite loop, is more like a "backwards" animation

[sag1v]

@christo-pr Not sure why you had to use the timer, but you are right in that it feels like going backwards.

I mentioned this in my comment above #9 (comment)

[christo-pr]

The timer is just to mimic the autoPlaySpeed that's why I mention it in my example, looking forward to use the inifite prop.

Thanks for the work!

[pacholoamit]

Hello, how's the infinite scroll feature coming up? A lot of us would appreciate it if you added the feature to the official package. thanks and more power :)

[alienbuild]

bump ^ :)

[Mamasakhlisi]

Not sure if it worth it (since @sag1v is already working on this feature) but for now I got it working with a bit of logic:

const itemsPerPage = 3
const items = [...]
const carouselRef = useRef(null);
const totalPages = Math.ceil(items.length / itemsPerPage)
let resetTimeout;

<Carousel
    ref={carouselRef}
    enableAutoPlay
    autoPlaySpeed={1500} // same time
    onNextEnd={({ index }) => {
         clearTimeout(resetTimeout)
         if (index + 1 === totalPages) {
            resetTimeout = setTimeout(() => {
               carouselRef.current.goTo(0)
           }, 1500) // same time
         }
    }}
    itemsToShow={itemsPerPage}
>
{items.map(() => ...)}
</Carousel>

This still doesn't feel like an infinite loop, is more like a "backwards" animation

Root change and give me error, TypeError: Cannot read property 'goTo' of null