14612

[code]

    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>
    
[/code]

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

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


CC BY-SA 3.0
2015-08-18T08:56:40.260
14580
2015-08-19T04:41:39.813
question
javascript monaca onsen-ui
ons-carouselでループさせるための方法

[code]

    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'});
          }
        });
      });
    });
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 3.0
2015-08-19T04:41:39.813
14612
2015-08-19T04:41:39.813
8532
14580
answer