React Reference > Carousel Component

<Carousel />

使い方 

<Carousel
          onPostChange={() => console.log('onPostChange')}
          onOverscroll={() => console.log('onOverscroll')}
          onRefresh={() => console.log('onRefresh')}
          ref={(carousel) => { this.carousel = carousel; }}
          swipeable
          overscrollable
          autoScroll
          fullscreen
          autoScrollRatio={0.2}
      >
          <CarouselItem style={{backgroundColor: 'gray'}}>
            <div className='item-label'>GRAY</div>
          </CarouselItem>
          <CarouselItem style={{backgroundColor: '#085078'}}>
            <div className='item-label'>BLUE</div>
          </CarouselItem>
        </Carousel>

Prop一覧

[編集]
名前 型 / デフォルト値 概要
direction enum The direction of the carousel. Can be either “horizontal” or “vertical”. Default is “horizontal”. （翻訳中） Optional.
fullscreen bool If true, the carousel will cover the whole screen. （翻訳中） Optional.
overscrollable bool If true, the carousel will be scrollable over the edge. It will bounce back when released. （翻訳中） Optional.
centered bool If true, the carousel then the selected item will be in the center of the carousel instead of the beginning. Useful only when the items are smaller than the carousel. （翻訳中） Optional.
itemWidth string ons-carousel-item’s width. Only works when the direction is set to “horizontal”. Can be in pixels or a percentage. （翻訳中） Optional.
itemHeight string ons-carousel-item’s height. Only works when the direction is set to “vertical”. Can be in pixels or a percentage. （翻訳中） Optional.
autoScroll bool If true, the carousel will be automatically scrolled to the closest item border when released. （翻訳中） Optional.
autoScrollRatio number A number between 0.0 and 1.0 that specifies how much the user must drag the carousel in order for it to auto scroll to the next item. （翻訳中） Optional.
swipeable bool If true, the carousel can be scrolled by drag or swipe. （翻訳中） Optional.
disabled bool If true, the carousel will be disabled. （翻訳中） Optional.
activeIndex number Specify the index of the ons-carousel-item to show. Default is 0. （翻訳中） Optional.
index number DEPRECATED! Use activeIndex instead. （翻訳中） Optional.
autoRefresh bool When this attribute is set the carousel will automatically refresh when the number of child nodes change. （翻訳中） Optional.
onPreChange func Called just before the current carousel item changes. （翻訳中） Optional.
onPostChange func Called just after the current carousel item has changed. （翻訳中） Optional.
onRefresh func Called when the carousel has been refreshed. （翻訳中） Optional.
onOverscroll func Called when the carousel has been overscrolled. （翻訳中） Optional.
animation string If this prop is set to “none” the transitions will not be animated. （翻訳中） Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. （翻訳中） Optional.
onSwipe func Hook called whenever the user slides the carousel. It gets a decimal index and an animationOptions object as arguments. （翻訳中） Optional.

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。