I’m working on an ionic app, using ionic slide box that has an HTML5 audio content in each slide.
But the problem is when the slide box change, the next audio container doesn’t show up, and only show up when I try to resize the browser window.
Below is my code:
<ion-slide-box active-slide="0" pager-click="audioSlideChange(index)" does-continue="true">
<ion-slide>
<div class="audio-container">
<audio controls>
<source ng-src="http://sample.com/audio.mp3" type="audio/mpeg">
</audio>
<span>
Caption 2
</span>
</div>
</ion-slide>
<ion-slide>
<div class="audio-container" >
<audio controls>
<source ng-src="http://sample.com/audio1.mp3" type="audio/mpeg">
</audio>
<span>
Caption 3
</span>
</div>
</ion-slide>
</ion-slide-box>
Controller:
app.controller('myCtrl', function($scope, $ionicSlideBoxDelegate) {
$scope.audioSlideChange = function(index) {
$ionicSlideBoxDelegate.slide(index);
}
});
Below is image of that audio when the silder change:
