CODEWITHSUNDEEP
reactjs
pranta
pranta

Reputation: 95

Nuka-carousel custom arrow button

I'm new to nuka-carousel react.I'm trying to add prev-next arrow button instead of just 'prev' and 'next' written button. I've found various solutions where a decorator function is written.I have tried it but havn't found my desired output. Here is my code:

import Carousel from 'nuka-carousel';
import createReactClass from 'create-react-class';
var Decorators = [
    {
        component: createReactClass({
            render() {
                return (
                    <div>
                        <i className="fa fa-arrow-left" onClick={this.props.previousSlide} aria-hidden="true"></i>
                    </div>
                )
            }
        }),
        position: 'CenterLeft',
        style: {
            padding: 20
        }
    },
    {
        component: createReactClass({
            render() {
                return (
                    <div>
                        <i className="fa fa-arrow-right" onClick={this.props.nextSlide} aria-hidden="true"></i>
                    </div>
                )
            }
        }),
        position: 'CenterRight',
        style: {
            padding: 20
        }
    }
];

return(
    <Carousel decortators={Decorators} slidesToShow={3} cellSpacing={50} >
        {cards}
    </Carousel>

);

Upvotes: 5

Views: 4231

Answers (1)

naffiq
naffiq

Reputation: 1050

I believe you need to set render*Controls prop of your Carousel component (where * is specific place of control, such as CenterLeft or CenterRight):

<Carousel
  renderCenterLeftControls={({ previousSlide }) => (
    <button onClick={previousSlide}>
      <i className="fa fa-arrow-left" />
    </button>
  )}
  renderCenterRightControls={({ nextSlide }) => (
    <button onClick={nextSlide}>
      <i className="fa fa-arrow-right"/>
    </button>
  )}
>
  {cards}
</Carousel>

UPD: the link to docs was updated

Upvotes: 10

Related Questions