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

Posted 2023-02-25

【中文标题】使用 React Slick 滑块在每张幻灯片中添加点

【英文标题】：Add dots in each slide with React Slick slider

【发布时间】：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

是的，我看到了这个功能，但它似乎只是一个自定义的“点”或分页。我也可以改变“初始”圆点的位置。事实上，我会在每张幻灯片中添加圆点，带有容器和相对位置，以对幻灯片的其他元素产生影响。

【参考方案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