Added infinite-ish scroll feature

[AustinLeeGordon]

Implemented an infinite scroll option as mentioned in #9

@sag1v I know you mentioned adding copies to make it actually appear to be infinite, but I think this is a good start for now for anyone who wants to use it as is. I personally don't mind the backwards scroll.

Seems like creating copies would be very inefficient, but I don't see a way to easily get around that.

Since it's not truly infinite, it will stop on the first/last item when it has potential to scroll past it. Here's an example:

I had issues trying to put together a demo page, so I left that mess out, but I did test it out on the current demos.

Let me know what you think!

[sag1v]

Thanks for the effort @AustinLeeGordon nicely done !
I think the feature in this way is not fully "baked" though, on top of that you can easily achieve this behavior in "user-land":

const onNextStart = (currentItem, nextItem) => {
  if (currentItem.index === nextItem.index) {
    // we hit the last item, go to first item
    carouselRef.current.goTo(0);
  }
};

const onPrevStart = (currentItem, nextItem) => {
  if (currentItem.index === nextItem.index) {
    // we hit the first item, go to last item
    carouselRef.current.goTo(items.length);
  }
};

// .....

<Carousel
  ref={carouselRef}
  onPrevStart={onPrevStart}
  onNextStart={onNextStart}
>
  {items}
</Carousel>

I still think we should copy the items and only render the visible ones (itemsToShow) + itemsToScroll.
Given 50 items, with itemsToShow: 2, itemsToScroll: 1 we will render:

hidden	visible	visible	hidden
[50]	[1]	[2]	[3]

This is also necessary for lazy loading which i also want to support (though it is achievable in user land as well)

What are your thoughts?

[AustinLeeGordon]

@sag1v Agreed. I looked at some other carousels with infinite scroll and this seems to be the best way to do it.

[Anu-Ujin]

@AustinLeeGordon Is there any infinite loop carousel demo? There is no infinite section in doc. I write infinite={true} in the Carousel but not working.
My version is "react-elastic-carousel": "^0.7.4"

[sag1v]

@Anu-Ujin There is no infinite section in demos because its not supported yet.

[venkateshr407]

How can I add an infinite loop section for react-elastic-carousel, please help me

[Neelam-Nishad]

Thanks for the effort @AustinLeeGordon nicely done ! I think the feature in this way is not fully "baked" though, on top of that you can easily achieve this behavior in "user-land":

const onNextStart = (currentItem, nextItem) => {
  if (currentItem.index === nextItem.index) {
    // we hit the last item, go to first item
    carouselRef.current.goTo(0);
  }
};

const onPrevStart = (currentItem, nextItem) => {
  if (currentItem.index === nextItem.index) {
    // we hit the first item, go to last item
    carouselRef.current.goTo(items.length);
  }
};

// .....

<Carousel
  ref={carouselRef}
  onPrevStart={onPrevStart}
  onNextStart={onNextStart}
>
  {items}
</Carousel>

I still think we should copy the items and only render the visible ones (itemsToShow) + itemsToScroll. Given 50 items, with itemsToShow: 2, itemsToScroll: 1 we will render:

hidden visible visible hidden
[50] [1] [2] [3]
This is also necessary for lazy loading which i also want to support (though it is achievable in user land as well)

What are your thoughts?

How to loop using this? the buttons are getting disabled everytime on reaching the last element.

edit: solution is (disableArrowsOnEnd={false})