Question

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

}

谢谢！

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

并将道具传递为Slider组件，如下所示：

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

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

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

1 个答案: