title: Add dots in each slide with React Slick slider
body: <p>For a slider in React.js, I use <a href="https://react-slick.neostack.com/docs/get-started" rel="nofollow noreferrer">React Slick</a>.</p>
  
  <p>With this API, we can easily add previous and next button in each slide with <a href="https://react-slick.neostack.com/docs/example/previous-next-methods" rel="nofollow noreferrer">Previous and Next methods</a>.
  But I wonder how to do the same thing with dots.</p>
  
  <p>Each slide is structured as follows:</p>
  
  <pre><code>const slides = this.props.items.map(item =&gt; {
    return (
      &lt;div className="carousel-item" key={item.id}&gt;
        &lt;div className="carousel-img"&gt;
          &lt;img className="img-fluid" src={item.src} alt={item.altText} /&gt;
        &lt;/div&gt;
        &lt;div className="carousel-caption"&gt;
          &lt;div className="carousel-caption-content"&gt;
            &lt;h3&gt;{item.caption.header}&lt;/h3&gt;
            &lt;div className="carousel-caption-text"&gt;{item.caption.text}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="carousel-controls"&gt;
            &lt;button className="button carousel-control carousel-control-prev" onClick={this.previous}&gt;Previous&lt;/button&gt;
            &lt;div className="carousel-indicators"&gt;
              {/*      */}
              {/* Dots */}
              {/*      */}
            &lt;/div&gt;
            &lt;button className="button carousel-control carousel-control-next" onClick={this.next}&gt;next&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  })
  </code></pre>
  
  <p>The container is structured as follows:  </p>
  
  <pre><code>return (
    &lt;Container
      fluid
      id={this.props.id}
      className={(this.props.className ? this.props.className + ' ' : '') + 'carousel-module'}
      tag="article"
    &gt;
      &lt;Row&gt;
        &lt;div className="carousel slide"&gt;
          &lt;Slider ref={c =&gt; (this.slider = c)} {...settings}&gt;
            {slides}
          &lt;/Slider&gt;
        &lt;/div&gt;
      &lt;/Row&gt;
    &lt;/Container&gt;
  );
  </code></pre>
  
  <p>And the component as follows: </p>
  
  <pre><code>class CarouselModule extends Component {
  
  previous = () =&gt; {
    this.slider.slickPrev();
  }
  next = () =&gt; {
    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 ( /* ... */ )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Thanks !</p>