在有限空間內(nèi)，循環(huán)播放同一類型的圖片、文字等內(nèi)容

基礎(chǔ)用法

適用廣泛的基礎(chǔ)用法

結(jié)合使用Carousel和Carousel.Item標(biāo)簽就得到了一個(gè)走馬燈?；脽羝膬?nèi)容是任意的，需要放在Carousel.Item標(biāo)簽中。默認(rèn)情況下，在鼠標(biāo) hover 底部的指示器時(shí)就會(huì)觸發(fā)切換。通過設(shè)置trigger屬性為click，可以達(dá)到點(diǎn)擊觸發(fā)的效果。

render() {
  return (
    <div className="demo-1 small">
      <div className="block">
        <span className="demonstration">默認(rèn) Hover 指示器觸發(fā)</span>
        <Carousel height="150px">
          {
            [1,2,3,4].map((item, index) => {
              return (
                <Carousel.Item key={index}>
                  <h3>{item}</h3>
                </Carousel.Item>
              )
            })
          }
        </Carousel>
      </div>
      <div className="block">
        <span className="demonstration">Click 指示器觸發(fā)</span>
        <Carousel trigger="click" height="150px">
          {
            [1,2,3,4].map((item, index) => {
              return (
                <Carousel.Item key={index}>
                  <h3>{item}</h3>
                </Carousel.Item>
              )
            })
          }
        </Carousel>
      </div>
    </div>
  )
}

指示器

可以將指示器的顯示位置設(shè)置在容器外部

indicator-position屬性定義了指示器的位置。默認(rèn)情況下，它會(huì)顯示在走馬燈內(nèi)部，設(shè)置為outside則會(huì)顯示在外部；設(shè)置為none則不會(huì)顯示指示器。

render() {
  return (
    <div className="demo-2 medium">
      <Carousel indicatorPosition="outside">
        {
          [1,2,3,4].map((item, index) => {
            return (
              <Carousel.Item key={index}>
                <h3>{item}</h3>
              </Carousel.Item>
            )
          })
        }
      </Carousel>
    </div>
  )
}

切換箭頭

可以設(shè)置切換箭頭的顯示時(shí)機(jī)

arrow屬性定義了切換箭頭的顯示時(shí)機(jī)。默認(rèn)情況下，切換箭頭只有在鼠標(biāo) hover 到走馬燈上時(shí)才會(huì)顯示；若將arrow設(shè)置為always，則會(huì)一直顯示；設(shè)置為never，則會(huì)一直隱藏。

render() {
  return (
    <div className="demo-3 medium">
      <Carousel interval="5000" arrow="always">
        {
          [1,2,3,4].map((item, index) => {
            return (
              <Carousel.Item key={index}>
                <h3>{item}</h3>
              </Carousel.Item>
            )
          })
        }
      </Carousel>
    </div>
  )
}

卡片化

當(dāng)頁面寬度方向空間空余，但高度方向空間匱乏時(shí)，可使用卡片風(fēng)格

將type屬性設(shè)置為card即可啟用卡片模式。從交互上來說，卡片模式和一般模式的最大區(qū)別在于，可以通過直接點(diǎn)擊兩側(cè)的幻燈片進(jìn)行切換。

render() {
  return (
    <div className="demo-4 medium">
      <Carousel interval="4000" type="card" height="200px">
        {
          [1,2,3,4,5,6].map((item, index) => {
            return (
              <Carousel.Item key={index}>
                <h3>{item}</h3>
              </Carousel.Item>
            )
          })
        }
      </Carousel>
    </div>
  )
}

扁平卡片化

統(tǒng)一卡片大小

將type屬性設(shè)置為flatcard即可啟用扁平卡片模式。從交互上來說，卡片模式和一般模式的最大區(qū)別在于，可以通過直接點(diǎn)擊兩側(cè)的幻燈片進(jìn)行切換。

render() {
  return (
    <div className="demo-4 medium">
      <Carousel interval="4000" type="flatcard" height="200px">
        {
          [1,2,3,4,5,6].map((item, index) => {
            return (
              <Carousel.Item key={index}>
                <h3>{item}</h3>
              </Carousel.Item>
            )
          })
        }
      </Carousel>
    </div>
  )
}

Carousel Attributes

Carousel Events

Carousel Methods

Carousel-Item Attributes