Slide-Box With auto-play="false" not playing after calling $

I want to build a page where I have a button to play the slide-box when clicking. When the page is first loaded, the slide is not playing. I’ve tried the following two approaches without luck.

Approach 1

  • Set auto-play to false
  • Call $ in the onclick handler()
    Result: I only see the slide box goes to the next slide and then stops.

Approach 2

  • Set auto-play to true
  • Call $ionicSlideBoxDelegate.stop() in the statement in the corresponding controller.
  • Call $ in the onclick handler()
    Result: The slide-box keeps going without ever stop.

Is there a bug?

Why not just have the button click change a variable, say autoPlay, and use that variable as in <ion-slide-box auto-play="autoPlay" ...

Do you have a codepen example that we could look at for reference?

I end up finding a workaround for the problem.

  1. Set auto-play to true
  2. In the controller, use a setTimeout() with 1 second delay to stop the slide.

@encodedmirko, I tried that approach but doesn’t work. Whenever auto-play is set to false, calling $ionicSlideBoxDelegate.start() will only advance one slide and stop again.

Interesting enough, I have to use the same workaround (setTimeout) to solve the same issue with a pure HTML video tag.

What I meant was not using $ionicSlideBoxDelegate at all, just change the value of an autoPlay variable. Seemed to work for me when I tried.