I am using the Angular FlexSlider in a a mobile tablet app to provide "photo frame" functionality. When you interact with the app (open a menu, click on the slider arrow to change images, etc), the images stop sliding.
This is expected behavior, but how do you start the slider back up in AngularJS?
Right now I have to restart the app.
<flex-slider id="mySlider" touch="true" pause-play="true" control-nav="true" prev-text="" next-text="" animation="slide" slide="i in slides" start="slideStarted()">
<li>
<img ng-src="{{i}}" >
</li>
</flex-slider>
I thought pause-play might work using:
$('#mySlider').flexslider("play");
But the slider does not start back up.
I discovered a solution. Here's how to initiate play on the FlexSlider in angular:
var flex_element = angular.element(document.querySelector('.flexslider'));
var flex_play_element = angular.element(document.querySelector('.flex-play'));
flex_play_element.trigger('click');