1.0.4 • Published 5 years ago

react-s-carousel v1.0.4

Weekly downloads
9
License
ISC
Repository
github
Last release
5 years ago

react-s-carousel

react-s-carousel实现了轮播功能,可以水平,垂直方向轮播与滑动

npm.io

安装

npm install react-s-carousel or  yarn add react-s-carousel

使用

import Carousel from 'react-s-carousel';

const windows = {
  width: window.innerWidth,
  height: window.innerHeight
};

export default class DemoList extends PureComponent {
  render() {
    return (
      <div>
        <div>上下滑动(item需指定高度)</div>
        <Carousel
          className={styles.hcarousel}
          horizontal={false}
          indicator={false}
          itemStyle={{height: '180px'}}
        >
          <div className={styles.demoIem} >1</div>
          <div className={styles.demoIem2} >2</div>
          <div className={styles.demoIem3} >3</div>
        </Carousel>
        <div>左右滑动(item需指定宽度)</div>
        <Carousel className={styles.hcarousel} itemStyle={{width: windows.width}}>
          <div className={styles.demoIem} >1</div>
          <div className={styles.demoIem2} >2</div>
          <div className={styles.demoIem3} >3</div>
        </Carousel>
      </div>
    );
  }
}

属性

属性值类型默认值描述
initItemnumber0初始化显示item的下标
horizontalbooleantrue是否水平滑动
loopbooleantrue是否循环滚动
autobooleantrue是否自动滚动
autoplayTimenumber3000自动滚动间隔
disablebooleanfalse是否可弹性拉动
indicatorbooleantrue是否显示指示器
indicatorStyleobject指示器容器样式
indicatorClsstring指示器容器样式
indicatorDefReactNode指示器默认布局
indicatorActiveReactNode指示器选中布局
bouncebooleanfalse是否可弹性拉动
itemClsstringcarousel item的样式
itemStyleobjectcarousel item的样式
refreshfunc刷新carousel
goToPagefunc指定跳转到某一页