Question: How to replicate centerMode and focusOnSelect from slick carousel?

[szimek]

How can I replicate centerMode with focusOnSelect from slick carousel using nuka carousel?

We're moving some pages from an app written in Angular 1.x to an app written in React and it looks like there's no wrapper for slick in React, there's only a port of slick that is missing some features and has its own bugs.

[mdaxtman]

Hi there @szimek , sorry for the delay. The APIs are a bit different between the two carousels but you can get pretty close to those features with a set up like this:

const ControlledCarousel = React.createClass({
  mixins: [Carousel.ControllerMixin],

  getInitialState() { return { slideIndex: 0 }; },

  render() {
    return (
      <div>
        <Carousel
          slidesToShow={3}
          cellAlign='center'
          ref="carousel"
          data={this.setCarouselData.bind(this, 'carousel')}
          slideIndex={this.state.slideIndex}
          afterSlide={newSlideIndex => this.setState({ slideIndex: newSlideIndex })}>
          <img onClick={() => this.setState({ slideIndex: 0 })} src="http://placehold.it/1000x400&text=slide1"/>
          <img onClick={() => this.setState({ slideIndex: 1 })} src="http://placehold.it/1000x400&text=slide2"/>
          <img onClick={() => this.setState({ slideIndex: 2 })} src="http://placehold.it/1000x400&text=slide3"/>
          <img onClick={() => this.setState({ slideIndex: 3 })} src="http://placehold.it/1000x400&text=slide4"/>
          <img onClick={() => this.setState({ slideIndex: 4 })} src="http://placehold.it/1000x400&text=slide5"/>
          <img onClick={() => this.setState({ slideIndex: 5 })} src="http://placehold.it/1000x400&text=slide6"/>
        </Carousel>
      </div>
    )
  }
});

cellAlign='center' is a close enough approximation to centerMode and setting click handlers for the children that sets a wrapper component's state will mimic the behavior of focusOnSelect. If you have any other questions, feel free to ask :-).