介绍

使用react做的轮播图

安装

    npm install slide-banner

API

参数 | 说明 | 类型| 默认值 ----|------|----|---- afterChange | 切换面板的回调 | function(current)| 无 autoplay | 是否自动切换 | boolean| false autoplaySpeed | 面板切换速度 ms | int| 3000 beforeChange | 切换面板的回调 | function(from, to)| 无 dots | 是否显示面板指示点 | boolean| true easing | 动画效果 | string| linear dotStyle | 指示点样式 | string| 无 dotActiveStyle | 当前激活的指示点样式 | string| 无 slickNext | 前进回调 | function()| 无 slickPrev | 后退回调 | function()| 无 slickGoTo | 切换到指定index的回调 | function(slideNumber:int)| 无 touchMove | 是否可以touch |boolean | false

Auto Play效果

用法

//App.css
.temp {
  text-align: center;
  background: #364d79;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.temp h3 {
  color: #fff;
  height: 100px;
  width: 100px;
}

.dots-class {
  border: 0;
  cursor: pointer;
  background: #fff;
  opacity: 0.3;
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.dots-class-active{
  background: #fff;
  opacity: 1;
  width: 24px;
  border: 0;
  cursor: pointer;
  display: block;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}


import React, { Component } from "react";
import SlideBanner from "slide-banner";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div style={{ height: 200, width: "100%" }}>
        <SlideBanner
          dotStyle="dots-class"
          dotActiveStyle="dots-class-active"
          autoplaySpeed={4000}
          autoplay={true}
          dots={true}
        >
          <div className="temp">
            <h3>1</h3>
          </div>
          <div className="temp">
            <h3>2</h3>
          </div>
          <div className="temp">
            <h3>3</h3>
          </div>
          <div className="temp">
            <h3>4</h3>
          </div>
        </SlideBanner>
      </div>
    );
  }
}

export default App;

beforeChange and afterChange hooks用法

//App.css
.temp {
  text-align: center;
  background: #364d79;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.temp h3 {
  color: #fff;
  height: 100px;
  width: 100px;
}

.dots-class {
  border: 0;
  cursor: pointer;
  background: #fff;
  opacity: 0.3;
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.dots-class-active{
  background: #fff;
  opacity: 1;
  width: 24px;
  border: 0;
  cursor: pointer;
  display: block;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}


import React, { Component } from "react";
import SlideBanner from "slide-banner";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div style={{ height: 200, width: "100%" }}>
        <SlideBanner
          ref={slider => (this.slider = slider)}
          dotStyle="dots-class"
          dotActiveStyle="dots-class-active"
          autoplaySpeed={4000}
          autoplay={true}
          dots={true}
          easing="ease-in"
          afterChange={current => {
            console.log(current);
          }}
          beforeChange={(from, to) => console.log(from, to)}
        >
          <div className="temp">
            <h3>1</h3>
          </div>
          <div className="temp">
            <h3>2</h3>
          </div>
          <div className="temp">
            <h3>3</h3>
          </div>
          <div className="temp">
            <h3>4</h3>
          </div>
        </SlideBanner>
      </div>
    );
  }
}

export default App;

Slide Go To效果

用法

//App.css
.temp {
  text-align: center;
  background: #364d79;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.temp h3 {
  color: #fff;
  height: 100px;
  width: 100px;
}

.dots-class {
  border: 0;
  cursor: pointer;
  background: #fff;
  opacity: 0.3;
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.dots-class-active{
  background: #fff;
  opacity: 1;
  width: 24px;
  border: 0;
  cursor: pointer;
  display: block;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}


import React, { Component } from "react";
import SlideBanner from "slide-banner";
import "./App.css";

class App extends Component {
  slideGoTo(e) {
    this.slider.slideGoTo(e.target.value);
  }

  render() {
    return (
      <div style={{ height: 200, width: "100%" }}>
        <SlideBanner
          ref={slider => (this.slider = slider)}
          dotStyle="dots-class"
          dotActiveStyle="dots-class-active"
          dots={false}
          easing="ease-in"
        >
          <div className="temp">
            <h3>1</h3>
          </div>
          <div className="temp">
            <h3>2</h3>
          </div>
          <div className="temp">
            <h3>3</h3>
          </div>
          <div className="temp">
            <h3>4</h3>
          </div>
        </SlideBanner>
        <div style={{ textAlign: "center" }}>
          <input
            onChange={e => this.slideGoTo(e)}
            defaultValue={0}
            type="range"
            min={0}
            max={3}
          />
        </div>
      </div>
    );
  }
}

export default App;

slickNext slickPrev效果

用法

//App.css
.temp {
  text-align: center;
  background: #364d79;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.temp h3 {
  color: #fff;
  height: 100px;
  width: 100px;
}

.dots-class {
  border: 0;
  cursor: pointer;
  background: #fff;
  opacity: 0.3;
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.dots-class-active{
  background: #fff;
  opacity: 1;
  width: 24px;
  border: 0;
  cursor: pointer;
  display: block;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}


import React, { Component } from "react";
import SlideBanner from "slide-banner";
import "./App.css";

class App extends Component {
  next() {
    this.slider.slideNext();
  }

  previous() {
    this.slider.slidePrev();
  }

  render() {
    return (
      <div style={{ height: 200, width: "100%" }}>
        <SlideBanner
          ref={slider => (this.slider = slider)}
          dotStyle="dots-class"
          dotActiveStyle="dots-class-active"
          dots={true}
          easing="ease-in"
        >
          <div className="temp">
            <h3>1</h3>
          </div>
          <div className="temp">
            <h3>2</h3>
          </div>
          <div className="temp">
            <h3>3</h3>
          </div>
          <div className="temp">
            <h3>4</h3>
          </div>
        </SlideBanner>
        <div style={{ textAlign: "center" }}>
          <button className="button" onClick={() => this.previous()}>
            Previous
          </button>
          <button className="button" onClick={() => this.next()}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default App;

touchMove效果

用法

//App.css
.temp {
  text-align: center;
  background: #364d79;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.temp h3 {
  color: #fff;
  height: 100px;
  width: 100px;
}

.dots-class {
  border: 0;
  cursor: pointer;
  background: #fff;
  opacity: 0.3;
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.dots-class-active{
  background: #fff;
  opacity: 1;
  width: 24px;
  border: 0;
  cursor: pointer;
  display: block;
  height: 3px;
  border-radius: 1px;
  outline: none;
  font-size: 0;
  color: transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}


import React, { Component } from "react";
import SlideBanner from "slide-banner";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div style={{ height: 200, width: "100%" }}>
        <SlideBanner
          dotStyle="dots-class"
          dotActiveStyle="dots-class-active"
          autoplaySpeed={4000}
          autoplay={true}
          dots={true}
          touchMove
        >
          <div className="temp">
            <h3>1</h3>
          </div>
          <div className="temp">
            <h3>2</h3>
          </div>
          <div className="temp">
            <h3>3</h3>
          </div>
          <div className="temp">
            <h3>4</h3>
          </div>
        </SlideBanner>
      </div>
    );
  }
}

export default App;