React-slick - 在多个项目轮播中有条件地隐藏点答案

【问题标题】：React-slick - Hide dots conditionally in multiple items carouselReact-slick - 在多个项目轮播中有条件地隐藏点
【发布时间】：2023-03-08 10:51:02
【问题描述】：

我是新手，所以这个问题可能有点基本。我有一个多项目轮播。 Dots 当前设置为 true，但是当它使用 4 张幻灯片动态加载并且设置为：

slidesToShow: 4, slidesToScroll: 4, 平板电脑仍然显示点（最大宽度：768px）...关键是我想隐藏它。

有没有办法添加条件，所以当幻灯片计数为 4 时，响应宽度为 768px 以隐藏点？

这是一个例子：https://codepen.io/fauslg/pen/wXmWxL

this.settings = { dots: true, infinite: false, speed: 500, slidesToShow: 4, slidesToScroll: 4, arrows: false, responsive:

【问题讨论】：

标签： reactjs react-slick

【解决方案1】：

您可以更改 SliderComponent 中的代码并添加：

    constructor(props){
.....
        let {settings} = this.props;

            for(let i = 0; i<settings.response.length();i++)

    {

    if(response[i].breakpoint == 768 && 

    response[i].settings.slidesToShow==4){

    settings.dots= false;

    break;

    }

    }


            ......
            .....
            }

如果响应数组始终具有相同的结构（您知道宽度 768 始终是第二个条目）：

    constructor(props){
.......
            let {settings} = this.props;
        settings.dots= (
      response[1].settings.slidesToShow==4)? false : true;
        ....}

【讨论】：