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 !

In the setting of the slider we can normally set like this by example: `const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 };` In this case, many dots appears and controls your slider . But I would insert them as a component in each slide , and no centralized them below the slider as by default. You see ? — Redhelling, Nov 12 '18 at 22:32
You can change position by applying css to slick-dots and custom dot component can be added like this https://react-slick.neostack.com/docs/example/append-dots — fiddlest, Nov 13 '18 at 02:32
Yes I saw this feature but it seems just a custom "dots" or pagination. I can change position of "initial" slick-dots too. In fact, I would have slick-dots in every slides, with a container and relative position to have an impact on other elements of the slide. — Redhelling, Nov 13 '18 at 22:34

score 1 · Answer 1 · answered May 04 '20 at 05:47

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

Add dots in each slide with React Slick slider

1 Answers1