CODEWITHSUNDEEP
onsen-ui
user5289740
user5289740

Reputation:

Endless carousel with Onsen UI

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.

Upvotes: 1

Views: 1581

Answers (2)

Quo_O
Quo_O

Reputation: 1

Just give function and attribute overscroll to your carousel :

<ons-carousel var="carousel" ons-overscroll="over($event.activeIndex)" swipeable ....

and in your controller :

$scope.over = function(idx) { if(idx==0){carousel.last();}else{carousel.first();} }

It also can be implemented to button for example in ons-carousel-cover :

<ons-carousel-cover>
    <div class="cover-label">
        <ons-button modifier="quiet" ng-click="prev(carousel.getActiveIndex());"> prev </ons-button>
        Swipe left or right
        <ons-button modifier="quiet" ng-click="next(carousel.getActiveIndex());;"> next </ons-button>
    </div>
</ons-carousel-cover>

and in your controller (for example 4 item of carousel {max_index=3}):

$scope.prev = function(idx) { if(idx==0){carousel.last();}else{carousel.prev();} }
$scope.next = function(idx) { if(idx==3){carousel.first();}else{carousel.next();} }

css for beauty : 

.cover-label {
  text-align: center;
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 10px;
  color: white;
}

Hope it Helps.

Upvotes: 0

cither
cither

Reputation: 313

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>

Upvotes: 2

Related Questions