Paging carousel


#1

How do I go about creating a paging carousel?


#2

Hi, unfortunately React Studio does not have that kind of element available. Paging carousels are usually not the most mobile friendly solution so it has not been on our development plans.

One could try to implement e.g. https://www.npmjs.com/package/react-alice-carousel into React Studio plugin but it’ll require some developer skills.


#3

I started to think about sort of carousel which changes state every n-seconds. It’s possible to create component with multiple states and then change component state with script.

Here’s an example where state changes every 4 seconds: https://neonto.cloud/preview/84jdp9m5/

clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
let val = this.props.appActions.dataSlots[‘ds_SlotCarouselIndex’];
this.props.appActions.updateDataSlot(‘ds_SlotCarouselIndex’, (val + 1) % 3);
}, 4000);
return input;