1
onsenui    
<ons-carousel initial-index="2" swipeable overscrollable auto-scroll fullscreen var="carousel">
 <ons-carousel-item style="background-color: #F44336;">
  <div class="item-label"><span onclick="navi.pushPage('c.html', { animation : 'lift' })">C</span></div></ons-carousel-item>
 <ons-carousel-item style="background-color: #ff9800;">
  <div class="item-label"><span onclick="navi.pushPage('p.html', { animation : 'lift' })">P</span></div></ons-carousel-item>
 <ons-carousel-item style="background-color: #03A9F4;">
  <div class="item-label"><span onclick="navi.pushPage('s.html', { animation : 'lift' })">S</span></div></ons-carousel-item>
 <ons-carousel-item style="background-color: #4CAF50;">
  <div class="item-label"><span onclick="navi.pushPage('w.html', { animation : 'lift' })">W</span></div></ons-carousel-item>
 <ons-carousel-item style="background-color: #212121;">
  <div class="item-label"><span onclick="navi.pushPage('i.html', { animation : 'lift' })">I</span></div></ons-carousel-item>
</ons-carousel>

というcarouselがあります。これをIを表示させたらCをまためくれるようにする、逆にCまで持って行ったらIがめくれるようにするとする動きを作りたいのですが、Swipeイベントをとった時にCを表示させるようなJSが書けるものなのでしょうか?少なくともonsenuiの標準機能には無いと考えています。発火イベントはとれるのでやれなくはないかなとは思ってはいますがいまいちどう書けばいいのか分かっていない感じです。

ちなみに、すでに設定されているons-carousel-itemのiとcを両端に追加してみましたが、結局index的には7個に増えたようにしか内部処理させていないので問題解決は出来ませんでした。単純に発火だけ見張っとけばいいのでしょうか?

1 件の回答 1

2

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.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/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>

A, B, C, Dの4枚からなるカルーセルの場合、ループのつなぎとして先頭にD, 末尾にAを追加し、initial-indexに1を指定します。あとはpostchangeイベントを見張って両端に来た時だけインデックスをずらしてやればいいです。setActiveCarouselItemIndex()の第二引数はドキュメントに載っていませんが、animation: 'none'の指定が効きます。Chromeで動作確認済みです。webkit系ブラウザじゃないとちゃんと動かないかもしれません。

3
  • ありがとうございます。移植してみましたがangular化で上手く動かなくなりました。'Error: [ng:areq] Argument 'appCtrl' is not a function, got undefined'というエラーが出ています。これをみると、[stackoverflow.com/questions/25895235/…、ons-navigatorを使っているとうまく表示されません。(animation="slide" var="navi" class="ng-scope"が駄目と出ました。)ons-carouselが全部消えているという感じです。(ons-toolbarは表示されています)動きの検証が出来ないので困ったなという状況です。
    – user5886
    Commented 2015年8月19日 8:12
  • もしかすると、monaca上でのangularの使い方の初期化をしていないからかもしれないので、もう少しいじってみます。すみません。
    – user5886
    Commented 2015年8月19日 8:59
  • index.htmlに設定していたons.bootstrap();が邪魔してました。すいません。
    – user5886
    Commented 2015年8月19日 9:10

この質問に回答するには、ログインする必要があります。