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

时间:2018-06-21 15:36:58

标签: reactjs react-slick

我是新来的人,所以也许这个问题有点基本。 我有多个物品轮播。当前将“点”设置为true,但是当它以4张幻灯片动态加载且设置为:

slidesToShow:4 slidesToScroll:4 平板电脑上仍会显示该点(最大宽度:768像素)...问题是我想将其隐藏。

是否可以添加条件,以便当幻灯片数为4时,响应宽度768px可以隐藏点?

下面是一个示例:https://codepen.io/fauslg/pen/wXmWxL

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

1 个答案:

答案 0 :(得分:0)

您可以在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;
        ....}