0.4.1 • Published 6 years ago
slide-banner v0.4.1
介绍
使用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;