slide-banner

介绍

使用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;