bee-carousel

bee-carousel

react bee-carousel component for tinper-bee

Carousel 可自定义手动点击滑动和左右滑动，可兼容移动端。基于swiper.js开发.继承swiper.js的所有方法和属性。

依赖

• react >= 15.3.0
• react-dom >= 15.3.0
• prop-types >= 15.6.0

使用方法

import React from 'react';
import Carousel from 'bee-carousel';

class Demo1 extends React.Component {
  render() {
    const params = {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      spaceBetween: 30
    }

    return(
      <Carousel {...params}>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </Carousel>
    )
  }
}

export default Demo1;

ReactDOM.render(Demo1, document.getElementById('target'));

API

参数	说明	类型	默认值
containerClass	Carousel 容器 class name	String	swiper-container
wrapperClass	Carousel 父元素 class name	String	swiper-wrapper
slideClass	Carousel 单个元素 class name	String	swiper-slide
prevButtonCustomizedClass	Carousel 前一个按钮 class name	String	''
nextButtonCustomizedClass	Carousel 下一个按钮 class name	String	''
paginationCustomizedClass	Carousel 页码 class name	String	''
shouldSwiperUpdate	当元素发生变是否更新Carousel	Boolea	false
rebuildOnUpdate	当元素更新是否重新渲染Carousel	Boolean	false
noSwiping	根据条件是否禁用滑动	Boolean	false
activeSlideKey	定义最初的激活态slide	String or Number	''

你也可以直接用swiper.js的原始参数 这里api/

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-carousel
$ cd bee-carousel
$ npm install
$ npm run dev

Changelog

1.0.2 (2020-04-24)

Bug Fixes

• 自动化 (9a0bd0a)

<a name="1.0.1"></a>