Add dots in each slide with React Slick slider

Question

For a slider in React.js, I use React Slick .

With this API, we can easily add previous and next button in each slide with Previous and Next methods . But I wonder how to do the same thing with dots.

Each slide is structured as follows:

const slides = this.props.items.map(item => {
  return (
    <div className="carousel-item" key={item.id}>
      <div className="carousel-img">
        <img className="img-fluid" src={item.src} alt={item.altText} />
      </div>
      <div className="carousel-caption">
        <div className="carousel-caption-content">
          <h3>{item.caption.header}</h3>
          <div className="carousel-caption-text">{item.caption.text}</div>
        </div>
        <div className="carousel-controls">
          <button className="button carousel-control carousel-control-prev" onClick={this.previous}>Previous</button>
          <div className="carousel-indicators">
            {/*      */}
            {/* Dots */}
            {/*      */}
          </div>
          <button className="button carousel-control carousel-control-next" onClick={this.next}>next</button>
        </div>
      </div>
    </div>
  )
})

The container is structured as follows:

return (
  <Container
    fluid
    id={this.props.id}
    className={(this.props.className ? this.props.className + ' ' : '') + 'carousel-module'}
    tag="article"
  >
    <Row>
      <div className="carousel slide">
        <Slider ref={c => (this.slider = c)} {...settings}>
          {slides}
        </Slider>
      </div>
    </Row>
  </Container>
);

And the component as follows:

class CarouselModule extends Component {

previous = () => {
  this.slider.slickPrev();
}
next = () => {
  this.slider.slickNext();
}
render() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 1,
    responsive: [
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  }
  const slide = /* ... */
  return ( /* ... */ )
}

}

Thanks !

Answer 1

You can use react-magic-slider-dots with react-slick.

Create setting as follows :

const settings = {
  dots: true,
  arrows: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  initialSlide: 1,
  speed: 500,
  appendDots: dots => {
    return <MagicSliderDots dots={dots} numDotsToShow={4} dotWidth={30} />;
  }

and pass props into Slider component as:

return (
  <Slider {...settings}>
    {slides}
  </Slider>
);

For docs visit : https://www.npmjs.com/package/react-magic-slider-dots