@4c/react-carousel 中文文档教程

Question

react-carousel

功能丰富的 react-way 旋转木马组件，不吸

React carousel

Why?

有一些很棒的 carousel（比如 slick）没有真正的 React 实现。 该库为您提供的轮播不仅是某些 jQuery 解决方案的包装器，还可以用作受控或不受控元素（类似于 inputs)，并且有很多有用的特性。

Installation

npm i @4c/react-carousel

Usage

默认情况下，该组件不需要任何东西，除了子项即可呈现简单的轮播。

import Carousel from '@4c/react-carousel';

...

render() {
  return (
    <Carousel>
      <img src={imageOne} />
      <img src={imageTwo} />
      <img src={imageThree} />
    </Carousel>
  );
}

Carousel as controlled element

您可以通过为 Carousel 提供 value 和 onChange 道具来控制显示哪些幻灯片

import Carousel from '@4c/react-carousel';

...

constructor(props) {
  super(props);
  this.state = {
    value: 0,
  };
}

// we check if we got event from input (and it has target property) or just value from Carousel
onChange = e => this.setState({ value: e.target ? e.target.value : e });
render() {
  return (
    <div>
      <input value={this.state.value} onChange={this.onChange} type="number" />
      <Carousel
        value={this.state.value}
        onChange={this.onChange}
      >
        <img src={imageOne} />
        <img src={imageTwo} />
        <img src={imageThree} />
      </Carousel>
    </div>
  );
}

Where:

• value is the current slide's index (zero based, in the example above imageOne has index 0, imageTwo has index 1 and so on)
• onChange handler triggered when carousel wants to change current slide (e.g. on arrow click or on swipe)

Passing slides as a prop

import Carousel from '@4c/react-carousel';

...

render() {
  const slides = [
    (<img key={1} src={abstractImage} />),
    (<img key={2} src={animalsImage} />),
    (<img key={3} src={businessImage} />),
    (<img key={4} src={cityImage} />),
    (<img key={5} src={fashionImage} />),
    (<img key={6} src={foodImage} />),
    (<img key={7} src={natureImage} />),
    (<img key={8} src={nightlifeImage} />),
    (<img key={9} src={peopleImage} />),
    (<img key={10} src={sportsImage} />),
    (<img key={11} src={technicsImage} />),
    (<img key={12} src={transportImage} />),
  ];

  return (
    <Carousel slides={slides} />
  );
}

Where:

• slides is an array of slides (it must be an array, if you want to use a component as an only slide you have to pass it as a child)

Additional options

import Carousel from '@4c/react-carousel';
import Icon from 'react-fa';
...
render() {
  return (
    <Carousel
      slidesPerPage={5}
      slidesPerScroll={2}
      animationSpeed={1500}
      autoPlay={3000}
      offset={50}
      itemWidth={250}
      clickToChange
      centered
    >
      <img src={imageOne} />
      <img src={imageTwo} />
      <img src={imageThree} />
    </Carousel>
  );
}

Where:

• slidesPerPage is the number of slides visible at once
• slidesPerScroll is the number by which value will change on autoPlay and when arrow is clicked
• animationSpeed (number) transition duration in milliseconds
• autoPlay (number) slide change interval in milliseconds
• offset (number) padding between items
• itemWidth (number) determines custom width for each slide in carousel
• clickToChange boolean indicating if clicking on a slide should trigger changing the current value
• centered boolean indicating if the current active slide should be aligned to the center or to the left of a carousel

Infinite

import Carousel, { Dots } from '@4c/react-carousel';

...

render() {
  return (
    <div>
      <Carousel
        infinite
      >
        <img className="img-example" src={someImage} />
        ...
        <img className="img-example" src={anotherImage} />
      </Carousel>
    </div>
  );
}

Responsive

所有道具（除了 value、onChange、responsive、children）都可以在不同的屏幕分辨率上设置为不同的值

import Carousel from '@4c/react-carousel';
import Icon from 'react-fa';
...
render() {
  return (
    <Carousel
      slidesPerPage={5}
      slidesPerScroll={2}
      infinite
      clickToChange
      centered
      breakpoints={{
        1000: { // these props will be applied when screen width is less than 1000px
          slidesPerPage: 2,
          clickToChange: false,
          centered: false,
          arrows: true,
          infinite: false,
        },
        500: {
          slidesPerPage: 1,
          slidesPerScroll: 1,
          clickToChange: false,
          centered: false,
          arrowLeft: (<Icon className="icon-example" name="arrow-left" />),
          arrowRight: (<Icon className="icon-example" name="arrow-right" />),
          animationSpeed: 2000,
          infinite: false,
        },
      }}
    >
      <img src={imageOne} />
      <img src={imageTwo} />
      <img src={imageThree} />
    </Carousel>
  );
}

注意：在上面的示例中您不能在 500 断点中保留 clickToChange 值。 在这种情况下，将不会应用来自 1000 断点的值，因为选项不会从较高分辨率继承到较低分辨率，只会从默认分辨率继承到当前分辨率。

Showing dots or thumbnails

有一个单独的点组件可用于显示导航点。

import Carousel, { Dots } from '@4c/react-carousel';

...

constructor(props) {
  super(props);
  this.state = {
    value: 0,
  };
}

onChange = value => this.setState({ value });

render() {
  return (
    <div>
      <Carousel
        value={this.state.value}
        onChange={this.onChange}
      >
        <img className="img-example" src={someImage} />
        ...
        <img className="img-example" src={anotherImage} />
      </Carousel>
      <Dots value={this.state.value} onChange={this.onChange} number={12} />
    </div>
  );
}

它还可以显示缩略图而不是点

import Carousel, { Dots } from '@4c/react-carousel';

...

constructor(props) {
  super(props);
  this.state = {
    value: 0,
  };
}

onChange = value => this.setState({ value });

render() {
  return (
    <div>
      <Carousel
        value={this.state.value}
        onChange={this.onChange}
      >
        <img className="img-example" src={someImage} />
        ...
        <img className="img-example" src={anotherImage} />
      </Carousel>
      <Dots
        value={this.state.value}
        onChange={this.onChange}
        thumbnails={[
          (<img key={1} className="img-example-small" src={abstractImage} />),
          ...
          (<img key={12} className="img-example-small" src={transportImage} />),
        ]}
      />
    </div>
  );
}

Example app

您可以在简单的示例应用程序中看到轮播是如何使用的：

npm run example

并转到 localhost:3000。

Unit tests

npm run test-unit

Regression tests

未安装则安装 selenium

npm run selenium-install

1. npm run selenium-start
2. npm run example
3. npm run test-regression

Roadmap

建设中...

License

react-carousel 版权所有 © 2014-2018 Brainhub 它是免费软件，并且可以根据许可证中指定的条款重新分发。

About

@4c/react-carousel 是一个叉子！