質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

onsen-uiでcarouselを操作するgetActiveCarouselItemIndex()の書き方について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,742

score 53

setActiveCarouselItemIndex(index)については解決しましたので、次にgetActiveCarouselItemIndex()についてご質問します。

carousel
    <ons-carousel initial-index="2" swipeable overscrollable auto-scroll fullscreen var="carousel">
        <ons-carousel-item style="background-color: white;" >
            <div class="item-label"><span onclick="navi.pushPage('a1.html')">a1</span></div>
        </ons-carousel-item>
        <ons-carousel-item style="background-color: black;">
                <div class="item-label"><span onclick="navi.pushPage('b2.html')">b2</span></div>
            </ons-button>
        </ons-carousel-item>
        <ons-carousel-item style="background-color: blue;">
                <div class="item-label"><span onclick="navi.pushPage('c3.html')">c3</span></div>
            </ons-button>
        </ons-carousel-item>
        <ons-carousel-item style="background-color: brown;">
            <div class="item-label"><span onclick="navi.pushPage('d4.html')">d4</span></div>
        </ons-carousel-item>
            <ons-carousel-item style="background-color: red;">
            <div class="item-label"><span onclick="navi.pushPage('e5.html')">e5</span></div>       
        </ons-carousel-item>
    </ons-carousel>

carousel上のボタン
    <div class="button-bar" style="width:100%; bottom:10px; position:absolute;">
            <div class="button-bar__item">
                <input type="radio" name="segment-a" onclick="carousel.setActiveCarouselItemIndex(0);">
                <button class="button-bar__button" onclick="carousel.setActiveCarouselItemIndex(1);">a1</button>
            </div>
            <div class="button-bar__item">
                <input type="radio" name="segment-a" onclick="carousel.setActiveCarouselItemIndex(2);">
                <button class="button-bar__button">b2</button>
            </div>
            <div class="button-bar__item">
                <input type="radio" name="segment-a" checked>
                <button class="button-bar__button" onclick="carousel.setActiveCarouselItemIndex(3);">c3</button>
            </div>
            <div class="button-bar__item">
                <input type="radio" name="segment-a">
                <button class="button-bar__button">d4</button>
            </div>
            <div class="button-bar__item" onclick="carousel.setActiveCarouselItemIndex(4);">
                <input type="radio" name="segment-a">
                <button class="button-bar__button">e5</button>
            </div>
    </div>

と現状なっており、ボタンを押すと該当のCarouselに動きます。しかし、Swaipさせると現在の位置をボタンが認識しないため、自動で動いてくれません。

そこでgetActiveCarouselItemIndex()を使うことで現在のCarouselのindex番号が取れるのですが、これをどこに差し込めばよいのかがイマイチわかりません。関数を作って常時見張ってボタンのDOMを変更させればよいのでしょうか?
いわゆる、pagenationというやつをつくろうとしており、owl carouselではこんな感じ動きます。
http://wryoku.com/sample_page/owl_carousel/
(owl carouselはjQueryプラグインなので、paginationはdefault機能です。)

onsenuiのcarousel関連情報
http://ja.onsen.io/reference/ons-carousel.html#method-getActiveCarouselItemIndex

宜しくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

自分も同じ部分で一瞬つまづいたので、回答してみます。自分もmonacaを利用して作成しております。
ご質問者様にとってはすでに時遅しとは思いますが・・・。

正しいやり方かどうか正直わからないのですが、自分はこれで動きました。
カルーセルアイテムが変わった時にpostchangeというイベントを取得できます。
その時に、その時点でのカルーセルアイテムのインデックスを取得できます。
ご質問者様の書いているコードに合わせますと、

ons.ready(function() {
    //ons-carouselのvar属性"carousel"に合わせてonメソッドを使う。
    carousel.on('postchange', function(event){
        var activeCarouselItemIndex = event.activeIndex; //スワイプした後のItemindex
        var lastActiveCarouselItemIndex = event.lastActiveIndex; //スワイプする前のItemindex
    });
});

ons.ready(function(){});で囲むことは必須な気がします。
jquery内で動かした際には動きませんでした。
あとはactiveCarouselItemIndexもしくはlastActiveCarouselItemIndexの値に合わせて、何かしら希望の操作をすればいいと思います。

http://ja.onsen.io/reference/ons-carousel.html
ここも参考にして見てみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る