react-elastic-carousel: Infinite looping of children

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 😃

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

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

Solution:

    const carouselRef = useRef(null);
    let resetTimeout;
    
    return(

 <Carousel
                    ref={carouselRef}
                    pagination={false}
                    enableAutoPlay={true}
                    showArrows={false}
                    autoPlaySpeed={4000}
                    isRTL={false}
                    onNextEnd={({ index }) => {
                        clearTimeout(resetTimeout);
                        resetTimeout = setTimeout(() => {
                            carouselRef?.current?.goTo(0);
                        }, 4000); // same time
                    }}
                    >
                    
                    {....}
                    
                    </carrousel>


);

Any update on this?

I do like @sag1v and it work 👍

const carouselRef = React.useRef(null);
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(universities.length);
  }
};

<Carousel
  className='carousel-university'
  breakPoints={breakPoints}
  ref={carouselRef}
  onPrevStart={onPrevStart}
  onNextStart={onNextStart}
  disableArrowsOnEnd={false}
>

It’s work good when I click the button prev or next but when I use MOUSE SWIPE next at the last item it’s go to the second item not first item (itemsToShow is 1)

Can’t wait the infinite 😃

This solution is worked for me:

const carouselRef = React.useRef(null); // declare at state level
let resetTimeout; //decalre at state level

<Carousel
                ref={carouselRef}
                enableMouseSwipe={true} itemsToShow={1} renderArrow={myArrow}
                pagination={false} renderPagination={myPagination}
                enableAutoPlay={true}
                autoPlaySpeed={1000}
                onNextEnd={({ index }) => {
                  console.log("index",index,banners.length)
                  if(index===banners.length-1){
                    clearTimeout(resetTimeout);
                    resetTimeout = setTimeout(() => {
                      carouselRef?.current?.goTo(0);
                    }, 1000); // same time
                  } 
                }}
              >
                {banners.map((b, index) => (
                  <Slide key={`banerssss-${index}`} b={b} />

                ))}
    </Carousel>

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

Hi @sag1v thanks for the great carousel slider! It’s 2022 now and we’re still waiting for infinite loop!

Thanks!

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!

I did this to create a infinite loop effect (NOTE: I works only with arrow button, with auto play it stops at last slide)

// replace infinite array with your array name // //infinite array is a state I create which store my array ( since my array comes from API)

const carouselRef = React.useRef(null);

const onNextStart = (currentItem, nextItem) => { if (currentItem.index === nextItem.index) { // carouselRef.current.goTo(0); const newArray = […infiniteArray]; newArray.push(newArray.shift()); setInfiniteArray(newArray); } }; const onPrevStart = (currentItem, nextItem) => { if (currentItem.index === nextItem.index) { const newArray = […infiniteArray]; newArray.unshift(newArray.pop()); setInfiniteArray(newArray); } };

<Carousel breakPoints={breakPoints} // enableAutoPlay // autoPlaySpeed={5000} infiniteLoop={true} renderArrow={myArrow} className=‘carouselMain’ dots={true} ref={carouselRef} onPrevStart={onPrevStart} onNextStart={onNextStart} >

LET ME KNOW IF YOU CAN MAKE IT WORK WITH AUTOPLAY WITH THIS REFERENCE… UPVOTE IF IT HELPS YOU…

Hi, @sag1v thanks for the great carousel slider! we’re waiting for an infinite loop.

Thanks!