Element-React Carousel 走馬燈

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

基礎用法

適用廣泛的基礎用法

結合使用Carousel和Carousel.Item標簽就得到了一個走馬燈?；脽羝膬热菔侨我獾模枰旁?code>Carousel.Item標簽中。默認情況下，在鼠標 hover 底部的指示器時就會觸發(fā)切換。通過設置trigger屬性為click，可以達到點擊觸發(fā)的效果。

render() {
  return (
    <div className="demo-1 small">
      <div className="block">
        <span className="demonstration">默認 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>
  )
}

指示器

可以將指示器的顯示位置設置在容器外部

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

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>
  )
}

切換箭頭

可以設置切換箭頭的顯示時機

arrow屬性定義了切換箭頭的顯示時機。默認情況下，切換箭頭只有在鼠標 hover 到走馬燈上時才會顯示；若將arrow設置為always，則會一直顯示；設置為never，則會一直隱藏。

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>
  )
}

卡片化

當頁面寬度方向空間空余，但高度方向空間匱乏時，可使用卡片風格

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

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屬性設置為flatcard即可啟用扁平卡片模式。從交互上來說，卡片模式和一般模式的最大區(qū)別在于，可以通過直接點擊兩側的幻燈片進行切換。

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