Onsen-ui Carousel properties auto play not working

Question

I am using onsen UI here I use carousel in my mobile web app, but here some problem occurs by which I am unable to use the property autoplay.

   <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>

And My 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)
  });
});

No error msg occurs but my autoplay option is not working.

Answer 1

This function perfectly works for me ...

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);

Answer 2

If you mean auto-scroll option by saying "autoplay" I suppose you misunderstand the goal of auto-scroll option and expect that the carousel will go through its items without any user's action with auto-scroll option.

From the documentation:

auto-scroll: If this attribute is set the carousel will be automatically scrolled to the closest item border when released.

See how it works in the playground. With auto-scroll option when a user wants to swipe to the next or previous item in the carousel she doesn't need to swipe until the end. It's enough to swipe partially because then the carousel will finish swiping automatically. Delete auto-scroll option, press Run and try to swipe the carousel. You will see that swiping stops where you released.

So, auto-scroll is not autoplay. But how to implement autoplay after all? Just use carousel methods (next, first and getActiveIndex) and properties (itemCount) in setInterval function.

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);

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)
  });
});

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);

<link href="https://unpkg.com/onsenui/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://unpkg.com/onsenui/css/onsenui.css" rel="stylesheet"/>
<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
  <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 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>