Core | Carousel issue: The onSwipe property does not work.

[keijiodagawa]

Environment

[Core]
  onsenui latest
  
[Platform]
  Desktop - OS X 10.13.1
  Mobile - Android 5.1
  Mobile - iOS 11.1.2

[Browser]
  Desktop - Safari 11.0.1 on OS X 10.13.1
  Mobile - Android WebView
  Mobile - iOS UIWebView

Encountered problem

Core | Carousel issue: The onSwipe property does not work.

How to reproduce

Demo link

• HTML

<ons-page id="page1">
  <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 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>
</ons-page>

• JS

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.matches('#page1')) {
    var carousel = document.getElementById("carousel");
    carousel.onSwipe = function(result) {
      alert("Carousel onSwipe: " + result);
    }

  }
});

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