55
Views
5
Comments
Solved
Carousel Play and Pause button
Question
Application Type
Reactive
Service Studio Version
11.54.18 (Build 62611)

I am developing a carousel section and I have some kind of error when trying to play/pause the carousel using two icons (play icon and pause icon), the icon changes depending on the value of the IsPaused variable, the default is True, I added the function onClick(CarouselController) to those icons to change the boolean value.

In the Carousel Widget I already set the Autoplay property to IsPaused, when I click on the Pause Icon, the IsPaused variable changes to False, that means the carousel is Paused.

After that I get the index of the slider and save that Integer value to use as the starting position.



But the slide switches to the first slide instead of keeping the current index when paused.


Thank you in advance! 

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Luis,

Below mentioned  is an alternative approach to implement the use-case of playing/pausing the carousel using two icons (play icon and pause icon) with the available carousel APIs:

JS Snippet:

const carouselAutoplay = OutSystems.OSUI.Patterns.CarouselAPI.GetCarouselItemById($parameters.CarouselId).provider.Components.Autoplay;

if($parameters.IsPlay) {
    carouselAutoplay.play();
} else {
    carouselAutoplay.pause();
}

Demo screen: AutoPlayCarouselTask

Refer to the attached oml.

I hope this helps you!


Kind regards,

Benjith Sam

AutoPlayCarouselTask.oml
UserImage.jpg
Luis Jimenez

Thanks a lot, it worked for me.
Regards,
Luis.

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Luis. I'm glad I could assist you :)


Kind regards,

Benjith Sam

2022-08-31 11-22-19
Joao Fernandes

Hi Luis,

The first time the widget is loaded, the starting position is saved and is not possible to change this value, you need to initialize the widget again with the new value.

A simple work around for this, is to force a new widget to be loaded, you can have two widgets in a If statement, one for when IsPaused = True and one for when IsPaused = False.


Link

https://personal-ugzz2u1b.outsystemscloud.com/CV/Screen1?_ts=638261426679646472


 Regards,

JF

UserImage.jpg
Luis Jimenez

Thanks for your time, the issue was solved.

Regards,
Luis.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Luis,

Below mentioned  is an alternative approach to implement the use-case of playing/pausing the carousel using two icons (play icon and pause icon) with the available carousel APIs:

JS Snippet:

const carouselAutoplay = OutSystems.OSUI.Patterns.CarouselAPI.GetCarouselItemById($parameters.CarouselId).provider.Components.Autoplay;

if($parameters.IsPlay) {
    carouselAutoplay.play();
} else {
    carouselAutoplay.pause();
}

Demo screen: AutoPlayCarouselTask

Refer to the attached oml.

I hope this helps you!


Kind regards,

Benjith Sam

AutoPlayCarouselTask.oml
UserImage.jpg
Luis Jimenez

Thanks a lot, it worked for me.
Regards,
Luis.

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Luis. I'm glad I could assist you :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.