轮播

基础使用

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  return (
    <CCarousel
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
  )
}

折叠/展开 代码

无限循环

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  return (
    <CCarousel
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
      infinity
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
  )
}

折叠/展开 代码

箭头展示时机

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  return (
    <CCarousel
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
      arrowTiming="hover"
      infinity
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
  )
}

折叠/展开 代码

主题

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  const [theme, setTheme] = useState('primary')

  const themeOptions = [
    { label: 'primary', value: 'primary' },
    { label: 'secondary', value: 'secondary' },
    { label: 'warning', value: 'warning' },
    { label: 'negative', value: 'negative' }
  ]

  return (
    <>
    <CRadioGroup options={themeOptions} value={theme} onChange={setTheme} />
    <CCarousel
      theme={theme}
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
    </>
  )
}

折叠/展开 代码

自定义箭头内容

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  return (
    <CCarousel
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
      customArrowPrev={<CButton flat icon theme="negative"><CIcon content={MdIcons.matKeyboardDoubleArrowLeft} /></CButton>}
      customArrowNext={<CButton flat icon theme="negative"><CIcon content={MdIcons.matKeyboardDoubleArrowRight} /></CButton>}
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
  )
}

折叠/展开 代码

自动播放

提示

注意到pauseOnHover属性默认为true，所以鼠标悬浮操作会暂停下一张倒计时

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  return (
    <CCarousel
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
      infinity
      interval={5000}
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
  )
}

折叠/展开 代码

纵向过渡

Loading...

function Demo() {
  const [activeIndex, setActiveIndex] = useState(0)

  const itemStyle = {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '100px',
  }

  return (
    <CCarousel
      activeIndex={activeIndex}
      onActiveIndexChange={setActiveIndex}
      vertical
      arrowTiming="hover"
      infinity
    >
      <CCarouselSlider>
        <div style={itemStyle}>
          Slider1
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider2
        </div>
      </CCarouselSlider>
      <CCarouselSlider>
        <div style={itemStyle}>
           Slider3
        </div>
      </CCarouselSlider>
    </CCarousel>
  )
}

折叠/展开 代码

CCarousel API

名称 (*代表必须)	描述	类型	默认值

No Data

CCarouselSlider API

名称 (*代表必须)	描述	类型	默认值

No Data