React-slick 在最后一张幻灯片上隐藏分页点
Posted
技术标签:
【中文标题】React-slick 在最后一张幻灯片上隐藏分页点【英文标题】:React-slick hide pagination dots on last slide 【发布时间】:2017-08-29 19:17:23 【问题描述】:我在我的项目中使用React-Slick 组件。除了最后一张幻灯片,我必须在所有幻灯片上显示分页点。我想隐藏最后一张幻灯片的分页点。
我检查了afterChange
函数可用作回调。这个可以用来自定义jQuery中的slider 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>
);
【问题讨论】:
你的代码是什么样的?可以举个小例子吗? 更新了代码。请在上面查看。 【参考方案1】:在组件构造时为 Slider 组件的点属性设置状态值。然后在不想显示的时候设置为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>
);
【讨论】:
谢谢,它就像一个魅力 :) 但你必须在afterChange
函数中绑定 this
才能让它工作。否则报错:React Uncaught TypeError: this.setState is not a function
是的,你是对的。我的错。您也可以使用箭头功能不必绑定this
。更新了我的答案。以上是关于React-slick 在最后一张幻灯片上隐藏分页点的主要内容,如果未能解决你的问题,请参考以下文章