Slides-react NPM

slides-react

一个npm包，使用 react 来实现的轮播图的 DOM 更新，我们没有使用定时器来实现，使用了最新的CSS3 transition 和 transform 来实现轮播图的循环，我们的项目还处于完善阶段，欢迎进行 fork。

项目演示地址：slides-react

安装

使用命令 npm add slides-react 或者 yarn add slides-react 来安装在你的项目依赖里

使用

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Slides from "./package";

import "./css/index.css";

const {
  SlideBox,
  SlideControl,
  SlideList,
  SlidePager,
} = Slides;

const list = [{
  href: "",
  src: require("./img/slides-img-1.jpg"),
}, {
  href: "",
  src: require("./img/slides-img-2.jpg"),
}, {
  href: "",
  src: require("./img/slides-img-3.jpg"),
}];

const App = () => <SlideBox list={list}>
  <SlideList />
  <SlidePager activeStyle={{ backgroundColor: "blue" }} />
  <SlideControl />
</SlideBox>;

ReactDOM.render(
  <App /> as any,
  document.getElementById("root")
);

提示

如果 SlideBox.children 下没有 SlideList，将使用默认的 SlideList。
SlidePager, SlideControl 组件是可选的。

类型或者参数

declare type Direction = "left" | "right";
interface IOptions {
    direction?: Direction;
    duration?: string;
    timeout?: number;
}

interface ISlideListItem {
  src: string;
  href: string;
  alt?: string;
}

interface IProps {
  list: ISlideListItem[];
  options?: IOptions;
}

declare class SlideBox extends React.Component<IProps, IState> {
    constructor(props: IProps);
    componentDidMount(): void;
    render(): JSX.Element;
    ...
}

interface ISlidePagerProps {
    list?: ISlideListItem[];
    activeStyle?: React.CSSProperties;
}
declare const SlidePager: React.FunctionComponent<ISlidePagerProps>;

interface ISlideListProps {
    list?: ISlideListItem[];
}
declare const SlideList: React.FunctionComponent<ISlideListProps>;

interface ISlideControlProps {
    onPrev?: () => void;
    onNext?: () => void;
    onStop?: () => void;
    onStart?: () => void;
}
declare const SlideControl: React.FunctionComponent<ISlideControlProps>;