slideChanged-event does not get triggered/fired

[Laurin S]

Hi,

I wanted to use the CarouselComponent, however, the "slideChanged"-event does not get triggered.

Any idea?

[Ruksar Moosa Sait]

Hi Laurin,

We have checked the reported defect in the below sample, and we let you know that it has been working as expected at our end.  Could you please check the below sample and let us know what we have missed replicating the defect?

Sample: https://stackblitz.com/edit/react-rfkbtj?file=index.js

 slideChanged(props) {

    console.log("trigged");

  }

Output Screenshot:

Regards,

Ruksar Moosa Sait

[Laurin S]

I've attached a demo, where the error occurs.

Attachment: reactrfkbtjr2wfsu_6dfb6277.zip

[Vengatesh Maniraj]

Hi Laurin,

Thanks for the sample.

We have checked the sample and we would like to let you know that the slide animation will be applied at a specific timing by default while changing the slides. In your project, you have used the set timeout for the slide change. So that the slide’s default animation will be reset the prevent it from changing to the next/previous slide.

So, we recommend you avoid the set timeout for the slide change to overcome this problem. And could you please let us know the use case scenario with the set timeout to check the other possibilities and provide the prompt solution?

Regards,

Vengatesh

Attachment: reactcarousel_6f3f73ca.zip

[Laurin S]

Hi, thanks for the quick reply.

The timeout is not used for the slide change, but rather to force the user to look/stay at each slide for a certain predefined minimum time. Once the countdown is at "0", the user can go to the next slide.

The use case scenario is the following: the carousel is used to "teach"/impart a course (formation), where the attendees need to stay for a certain time in front of each slide. Once the minimum time is passed, the user can go to the next slide. Obviously, if he returns to a previous slide, he doesn't need to stay again for the predefined minimum time at the slide but can turn back to the next slide immediately.

Do you have a better solution for this use case by using your CarouselComponent?

[Ruksar Moosa Sait]

Hi Laurin,

We have validated your requirement and suggest you use our predefined options to set the interval for each slide.

let us know if you need further assistance.

Regards,

Ruksar Moosa Sait

[Laurin S]

The "interval" property can be used when using autoplay. 

But, this property does not prevent, that a user manually goes to the next slide, for example by clicking on the "next" button, before the predefined "interval"-time is passed....

I don't want to use autoplay, I just want to force the user to stay a certain minimum of time in front of each slide. Once the minimum time is passed, the user can do whatever he wants... Go to next slide, go back some slides, and so on... Of course, once he goes to the next slide (n+1), again, he has to pass the minimum time to go to the next slide (n+2)...

[Ruksar Moosa Sait]

Hi Laurin,

We have analyzed your requirement and there are two possible solutions.

1. When animation duration and set timeout are set for the slide, it gets conflict and the slideChanged event doesn’t trigger. Hence, we suggest you set Animation as “None”.

2. You can use our public methods next and prev to change for the next/previous slide.

Kindly let us know if need further assistance.

Regards,

Ruksar Moosa Sait