17279


OnsenUIでWebアプリを開発しています。

その中でカルーセル(ons-
carouselコンポーネント)を使用する画面があり、左右に続くコンテンツがあるかどうかをユーザに示す矢印("<"と">")を表示したいと考えています。

矢印の表示はOnsenUIの標準機能で可能でしょうか？  
それとも、自力で実装するしかないでしょうか。


CC BY-SA 3.0
2015-10-05T07:14:04.640
17262
2015-10-05T12:27:10.980
question
onsen-ui
カルーセルで左右に矢印を出したい


Onsen UIの`onsen-css-components-blue-basic-theme.css`の2731行に`ons-list-
item`の`＞`を表示するクラス`.list__item--
chevron:before`がありますので、これをコピーし左用(`＜`)、右用(`＞`)のクラスを作成すれば実現できます。

CSS

[code]

    .carousel-item-chevron-l:before {
        position: absolute;
        left: 16px;
        top: 50%;
        color: #ddd;
        line-height: 28px;
        height: 28px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 28px;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        content: "\f104";
    }
    .carousel-item-chevron-r:before {
        position: absolute;
        right: 16px;
        top: 50%;
        color: #ddd;
        line-height: 28px;
        height: 28px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 28px;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        content: "\f105";
    }
    
[/code]

HTML

[code]

    <ons-carousel-item>
        <div class="carousel-item-chevron-l"></div>
        <div class="carousel-item-chevron-r"></div>
    </ons-carousel-item>
    
[/code]


CC BY-SA 3.0
2015-10-05T12:27:10.980
17279
2015-10-05T12:27:10.980
9566
17262
answer