npm install slide-banner
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效果
!image
用法
//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 (
dotActiveStyle="dots-class-active"
autoplaySpeed={4000}
autoplay={true}
dots={true}
>
1
2
3
4
);
}
}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 (
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)}
>
1
2
3
4
);
}
}export default App;
Slide Go To效果
!image
用法
//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 (
dotStyle="dots-class"
dotActiveStyle="dots-class-active"
dots={false}
easing="ease-in"
>
1
2
3
4
defaultValue={0}
type="range"
min={0}
max={3}
/>
);
}
}export default App;
slickNext slickPrev效果
!image
用法
//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 (
dotStyle="dots-class"
dotActiveStyle="dots-class-active"
dots={true}
easing="ease-in"
>
1
2
3
4
);
}
}export default App;
touchMove效果
!image
用法
//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 (
dotActiveStyle="dots-class-active"
autoplaySpeed={4000}
autoplay={true}
dots={true}
touchMove
>
1
2
3
4
);
}
}export default App;