slides-react

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")
);
 

提示

1. 如果 SlideBox.children 下没有 SlideList，将使用默认的 SlideList。
2. 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>;

仓库地址

我们的仓库地址在码云上托管，使用列子你可以 clone 下来查看 slides-react

更新日志

1. v1.0.0

• 1.0.0 正式版发布了
• 产品基本成型

1. v2.0.0

• 2.0.0 版本发布了
• 内部轮播方式大修改
• 接口 props 也修改了
• 支持 手动轮播了(左右翻页)

1. v2.0.1

• 修改 README.md 里的命名错误

1. v3.0.0

• 组件命名大更新
• 优化代码结构