Endless carousel with Onsen UI

Question

Is it possible to make the carousel in onsen framework endless? So that when I overscroll the last element to the right that the first element will be displayed? I made it in that way, but it is not seemless:

ons.ready(function () {
    carousel.on("overscroll", function (event) {
        if (event.direction == "right") {
            carousel.first();
        } else {
            carousel.last();
        }
    });
});

Thank you for tips.

Answer 1

My idea is that adding an extra cloned ons-carousel-item on both ends so that I can replace the current slide with the other in the middle when I reach either end. It works on webkit browsers, anyway.

ons.bootstrap()
.controller('AppCtrl', function($scope, $timeout){
  $timeout(function(){
    $scope.carousel.on('postchange', function(event){
      if(event.activeIndex === 0){
        $scope.carousel.setActiveCarouselItemIndex(4, {animation: 'none'});
      }
      else if(event.activeIndex === 5){
        $scope.carousel.setActiveCarouselItemIndex(1, {animation: 'none'});
      }
    });
  });
});

ons-carousel-item {
  display: table;
  text-align: center;
}
.item-label {
  display: table-cell;
  vertical-align: middle;
  color: white;
  line-height: 1;
  font-size: 48px;
  font-weight: bold;
}
.cover-label {
  text-align: center;
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 10px;
  color: white;
}

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/js/onsenui.min.js"></script>

  <ons-page ng-controller="AppCtrl">
    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" initial-index="1">
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">D</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">A</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">B</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">C</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">D</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">A</div>
      </ons-carousel-item>
      <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
    </ons-carousel>
  </ons-page>