ons-carouselでループさせるための方法

投稿者: user5886
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個に増えたようにしか内部処理させていないので問題解決は出来ませんでした。単純に発火だけ見張っとけばいいのでしょうか?

解決

_x000D_

_x000D_

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

_x000D_

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

_x000D_

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>_x000D_
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>_x000D_
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>_x000D_
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>_x000D_
_x000D_
  <ons-page ng-controller="appCtrl">_x000D_
    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" initial-index="1">_x000D_
      <ons-carousel-item style="background-color: #D38312;">_x000D_
        <div class="item-label">D</div>_x000D_
      </ons-carousel-item>_x000D_
      <ons-carousel-item style="background-color: gray;">_x000D_
        <div class="item-label">A</div>_x000D_
      </ons-carousel-item>_x000D_
      <ons-carousel-item style="background-color: #085078;">_x000D_
        <div class="item-label">B</div>_x000D_
      </ons-carousel-item>_x000D_
      <ons-carousel-item style="background-color: #373B44;">_x000D_
        <div class="item-label">C</div>_x000D_
      </ons-carousel-item>_x000D_
      <ons-carousel-item style="background-color: #D38312;">_x000D_
        <div class="item-label">D</div>_x000D_
      </ons-carousel-item>_x000D_
      <ons-carousel-item style="background-color: gray;">_x000D_
        <div class="item-label">A</div>_x000D_
      </ons-carousel-item>_x000D_
      <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>_x000D_
    </ons-carousel>_x000D_
  </ons-page>

_x000D_

_x000D_

_x000D_

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

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *