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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

1回答

4445閲覧

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

MasahiroKawai

総合スコア51

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2015/04/29 10:31

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

carousel

lang

1 <ons-carousel initial-index="2" swipeable overscrollable auto-scroll fullscreen var="carousel"> 2 <ons-carousel-item style="background-color: white;" > 3 <div class="item-label"><span onclick="navi.pushPage('a1.html')">a1</span></div> 4 </ons-carousel-item> 5 <ons-carousel-item style="background-color: black;"> 6 <div class="item-label"><span onclick="navi.pushPage('b2.html')">b2</span></div> 7 </ons-button> 8 </ons-carousel-item> 9 <ons-carousel-item style="background-color: blue;"> 10 <div class="item-label"><span onclick="navi.pushPage('c3.html')">c3</span></div> 11 </ons-button> 12 </ons-carousel-item> 13 <ons-carousel-item style="background-color: brown;"> 14 <div class="item-label"><span onclick="navi.pushPage('d4.html')">d4</span></div> 15 </ons-carousel-item> 16 <ons-carousel-item style="background-color: red;"> 17 <div class="item-label"><span onclick="navi.pushPage('e5.html')">e5</span></div> 18 </ons-carousel-item> 19 </ons-carousel>

carousel上のボタン

lang

1 <div class="button-bar" style="width:100%; bottom:10px; position:absolute;"> 2 <div class="button-bar__item"> 3 <input type="radio" name="segment-a" onclick="carousel.setActiveCarouselItemIndex(0);"> 4 <button class="button-bar__button" onclick="carousel.setActiveCarouselItemIndex(1);">a1</button> 5 </div> 6 <div class="button-bar__item"> 7 <input type="radio" name="segment-a" onclick="carousel.setActiveCarouselItemIndex(2);"> 8 <button class="button-bar__button">b2</button> 9 </div> 10 <div class="button-bar__item"> 11 <input type="radio" name="segment-a" checked> 12 <button class="button-bar__button" onclick="carousel.setActiveCarouselItemIndex(3);">c3</button> 13 </div> 14 <div class="button-bar__item"> 15 <input type="radio" name="segment-a"> 16 <button class="button-bar__button">d4</button> 17 </div> 18 <div class="button-bar__item" onclick="carousel.setActiveCarouselItemIndex(4);"> 19 <input type="radio" name="segment-a"> 20 <button class="button-bar__button">e5</button> 21 </div> 22 </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

宜しくお願いします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

lang

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

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

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

投稿2015/07/01 11:55

Aihara

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問