0

I'm new to react, so maybe this question is a bit basic. I have a multiple items carousel. Dots is currently set to true, but when it is loaded dynamically with 4 slides and the settings are:

slidesToShow: 4, slidesToScroll: 4, The dot is still displayed for tablets (max-width: 768px)... The point is that I would like to hide it.

Is there a way to add a condition so when the slide count is 4 , for responsive width 768px to hide the dot?

Here's an example: https://codepen.io/fauslg/pen/wXmWxL

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

Faus
  • 21
  • 3

1 Answers1

0

You can change the code in your SliderComponent and add: 

    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;

    }

    }


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

If the response array is always of the same structure(you know that width 768 is the second entry always):

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