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 在最后一张幻灯片上隐藏分页点的主要内容,如果未能解决你的问题,请参考以下文章

当我调整浏览器大小时,react-slick 幻灯片的宽度不会改变

在 jQuery 循环中隐藏/显示分页器

BxSlider 将最后一张幻灯片显示为第一张幻灯片

BxSlider将最后一张幻灯片显示为第一张幻灯片

Tvos UICollectionView ;没有分页

在垂直模式下使用 react-slick 增加幻灯片的高度