我在项目中使用React-Slick组件。我必须在除最后一张幻灯片之外的所有幻灯片上显示分页点。我想为最后一张幻灯片隐藏那些分页点。
我已检查过afterChange
函数是否可用作回调函数。这可用于在jQuery中自定义滑块css,但是如何使用此函数隐藏React应用程序中的分页点?
import Slider from 'react-slick';
export default class Carousal extends Component {
render() {
let settings = {
accessibility: true,
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: function (currentSlide) {
console.log(currentSlide);
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}
答案 0 :(得分:1)
在组件构造上设置Slider组件的点prop的状态值。如果您不想显示它,请将其设置为false。
export default class Carousal extends Component {
constructor(props) {
super(props);
this.state = {
dots: true
};
}
render() {
let settings = {
accessibility: true,
dots: this.state.dots,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: (currentSlide) => {
console.log(currentSlide);
this.setState({
dots: (currentSlide !== 'yourDesiredSlide')
});
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}