Slide Buttons props

[kennetpostigo]

Is there a prop to pass in to change the contents of the next and prev buttons? Wondering because by default those are the values of the buttons for the carousel.

Haven't used nuka-carousel before so I am not sure if I am overlooking how to change the button contents. I'm currently using a function component to render the carousel and props may be the best solution for this?

import React from 'react'
import Carousel from 'nuka-carousel';

function appCarousel (props) {
    return (
      <div className="UserSneakers">
        <Carousel slidesToShow={3} slidesToScroll={3} cellAlign="left">
          <img src="http://placehold.it/400x400/ffffff/c0392b/&text=slide1"/>
          <img src="http://placehold.it/400x400/ffffff/c0392b/&text=slide2"/>
          <img src="http://placehold.it/400x400/ffffff/c0392b/&text=slide3"/>
          <img src="http://placehold.it/400x400/ffffff/c0392b/&text=slide4"/>
          <img src="http://placehold.it/400x400/ffffff/c0392b/&text=slide5"/>
          <img src="http://placehold.it/400x400/ffffff/c0392b/&text=slide6"/>
        </Carousel>
      </div>
    )
};
export default appCarousel;

[charlesbodman]

You want 'decorators' prop.

var decorators = [{
  component: React.createClass({
    render() {
      return (
        <button
          onClick={this.props.previousSlide}>
          Previous Slide
        </button>
      )
    }
  }),
  position: 'CenterLeft',
  style: {
    padding: 20
  }
},
{
  component: React.createClass({
    render() {
      return (
        <button
          onClick={this.props.nextSlide}>
          Next Slide
        </button>
      )
    }
  }),
  position: 'CenterRight',
  style: {
    padding: 20
  }
}
];

 <Carousel slidesToShow={3} slidesToScroll={3} cellAlign="left" decorators={decorators} >
     //Children
</Carousel>

[kennetpostigo]

@charlesbodman Thank You!

[charlesbodman]

@kennetpostigo You are welcome :)