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
宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。