[英]Add dots in each slide with React Slick slider
For a slider in React.js, I use React Slick .对于 React.js 中的滑块,我使用React Slick 。
With this API, we can easily add previous and next button in each slide with Previous and Next methods .使用此 API,我们可以使用Previous 和 Next 方法轻松地在每张幻灯片中添加上一个和下一个按钮。 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 !谢谢 !
You can use react-magic-slider-dots with react-slick.您可以将 react-magic-slider-dots 与 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:并将 props 传递给 Slider 组件,如下所示:
return (
<Slider {...settings}>
{slides}
</Slider>
);
For docs visit : https://www.npmjs.com/package/react-magic-slider-dots文档请访问: https : //www.npmjs.com/package/react-magic-slider-dots
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.