 <script>
 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)
  });
});
 </script>
 
 <ons-carousel fullscreen swipeable auto-scroll overscrollable 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>