Skip to content

Commit 7abb4d4

Browse files
committed
Updating documentation to list nextArrow and prevArrow as settings, and providing an example
1 parent 2af93b3 commit 7abb4d4

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ var SimpleSlider = React.createClass({
6363
| className | String |Additional class name for the inner slider div | Yes |
6464
| adaptiveHeight | bool | Adjust the slide's height automatically | Yes |
6565
| arrows | bool | Should we show Left and right nav arrows | Yes |
66+
| nextArrow | React Component | Use this component for the next arrow button | Yes |
67+
| prevArrow | React Component | Use this component for the prev arrow button | Yes |
6668
| autoplay | bool | Should the scroller auto scroll? | Yes |
6769
| autoplaySpeed | int | delay between each auto scoll. in ms | Yes |
6870
| centerMode | bool | Should we centre to a single item? | Yes |
@@ -94,6 +96,26 @@ var SimpleSlider = React.createClass({
9496
| beforeChange | function | callback function called before the current index changes | Yes |
9597
| slickGoTo | int | go to the specified slide number
9698

99+
### Custom next/prev arrows
100+
101+
To customize the next/prev arrow elements, simply create new React components and set them
102+
as the values of nextArrow and prevArrow.
103+
104+
````
105+
class LeftNavButton extends React.Component {
106+
render() {
107+
return <button {...this.props}>Next</button>
108+
}
109+
}
110+
111+
````
112+
113+
Important: be sure that you pass your component's props to your clickable element
114+
like the example above. If you don't, your custom component won't trigger the click handler.
115+
116+
You can also set onClick={this.props.onClick} if you only want to set the click handler.
117+
118+
97119
### Development
98120
Want to run demos locally
99121
```

0 commit comments

Comments
 (0)