使用 React Slick 滑块在每张幻灯片中添加点答案

【问题标题】：Add dots in each slide with React Slick slider使用 React Slick 滑块在每张幻灯片中添加点
【发布时间】：2018-11-12 21:38:21
【问题描述】：

对于 React.js 中的滑块，我使用 React Slick。

使用此 API，我们可以使用 Previous and Next methods 在每张幻灯片中轻松添加上一个和下一个按钮。但我想知道如何用点做同样的事情。

每张幻灯片的结构如下：

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>
  )
})

容器结构如下：

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>
);

而组件如下：

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 ( /* ... */ )
}

}

谢谢！

【问题讨论】：

为每个滑块添加点是什么意思？
在滑块的设置中我们通常可以这样设置：const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; 在这种情况下，会出现很多点并控制你的滑块。但是我会将它们作为一个组件插入到每张幻灯片中，并且默认情况下不会将它们集中在滑块下方。看到了吗？
您可以通过将 css 应用于 slick-dots 来更改位置，并且可以像这样添加自定义点组件react-slick.neostack.com/docs/example/append-dots
是的，我看到了这个功能，但它似乎只是一个自定义的“点”或分页。我也可以改变“初始”圆点的位置。事实上，我会在每张幻灯片中添加圆点，带有容器和相对位置，以对幻灯片的其他元素产生影响。

标签： javascript reactjs ecmascript-6 slick.js react-slick

【解决方案1】：

您可以将 react-magic-slider-dots 与 react-slick 一起使用。

如下创建设置：

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} />;
  }

并将 props 传递给 Slider 组件：

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

文档访问：https://www.npmjs.com/package/react-magic-slider-dots

【讨论】：