轮播
基础使用
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 (<CCarouselactiveIndex={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 (<CCarouselactiveIndex={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 (<CCarouselactiveIndex={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} /><CCarouseltheme={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 (<CCarouselactiveIndex={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 (<CCarouselactiveIndex={activeIndex}onActiveIndexChange={setActiveIndex}infinityinterval={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 (<CCarouselactiveIndex={activeIndex}onActiveIndexChange={setActiveIndex}verticalarrowTiming="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