When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel.
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="prev()">
<ons-icon icon="md-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Carousel</div>
<div class="right">
<ons-toolbar-button onclick="next()">
<ons-icon icon="md-chevron-right"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-carousel fullscreen auto-scroll id="carousel">
<ons-carousel-item style="background-color: #085078;">
<div style="text-align: center; font-size: 30px; margin-top:
20px;
color: #fff;">
BLUE
</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #373B44;">
<div style="text-align: center; font-size: 30px; margin-top: 20px;
color: #fff;">
DARK
</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;">
<div style="text-align: center; font-size: 30px; margin-top: 20px;
color: #fff;">
ORANGE
</div>
</ons-carousel-item>
< /ons-carousel>
</ons-page>
In the associated Javascript:
var prev = function() {
var carousel = document.getElementById('carousel');
carousel.prev();
};
var next = function() {
var carousel = document.getElementById('carousel');
carousel.next();
};
ons.ready(function() {
var carousel = document.addEventListener('postchange', function(event) {
console.log('Changed to ' + event.activeIndex)
});
});
Although no error messages are being displayed, the autoplay feature is still not operational.