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

Question

monaca上でonsen-uiを使ってcarouselを作りました。

    <ons-carousel initial-index="2" swipeable overscrollable auto-scroll fullscreen var="carousel">
        <ons-carousel-item id="a1" style="background-color: white;" >
            <div class="item-label"><span onclick="navi.pushPage('a1.html')">a1</span></div>
        </ons-carousel-item>
        <ons-carousel-item var="b2" 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 var="c3" 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  var="d4" style="background-color: brown;">
            <div class="item-label"><span onclick="navi.pushPage('d4.html')">d4</span></div>
        </ons-carousel-item>
            <ons-carousel-item var="e5" 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">
                <button class="button-bar__button">a1</button>
            </div>
            <div class="button-bar__item">
                <input type="radio" name="segment-a">
                <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">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">
                <input type="radio" name="segment-a">
                <button class="button-bar__button">e5</button>
            </div>
    </div>

このボタンを押すと、任意のcarouselを呼び出すことが出来るsetActiveCarouselItemIndexを使って動かしたいのですが、いまいちどう書いてよいかわかりません。
a1のボタンを押すと、a1のcarouselが表示されるようにしたいのです。

http://ja.onsen.io/guide/overview.html#UsingCarousel

setActiveCarouselItemIndex(index, options)
indexで指定したアイテムを表示します。

$(function(
   $(#a1).setActiveCarouselItemIndex(0)
});

なんて書いてみましたが、carouselが真っ白になるだけでした。ボタンは表示されています。
正しくはどのように書けばよかったのでしょうか？
よろしくお願いいたします。

Answer 1

もう解決なさっているかもしれませんが、
各ラジオボタンのonclickイベントに下記のように設定してみてください。
※indexの値はそれぞれのボタン毎にお願い致します。

<input type="radio" name="segment-a" onclick="carousel.setActiveCarouselItemIndex(0);">
<button class="button-bar__button">a1</button>

setActiveCarouselItemIndexの前の「carousel」は<ons-carousel>に設定されている varの名前です。

Comments

[MasahiroKawai]

すんなり動きました！ありがとうございました！

[kiri]

良かったです^^