title: React-slick - Hide dots conditionally in multiple items carousel
body: <p>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:</p>
  
  <p>slidesToShow: 4,
  slidesToScroll: 4,
  The dot is still displayed for tablets (max-width: 768px)... The point is that I would like to hide it.</p>
  
  <p>Is there a way to add a condition so when the slide count is 4 , for responsive width 768px to hide the dot?</p>
  
  <p>Here's an example: <a href="https://codepen.io/fauslg/pen/wXmWxL" rel="nofollow noreferrer">https://codepen.io/fauslg/pen/wXmWxL</a> </p>
  
  <p><code>this.settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4,
        arrows: false,
        responsive:</code></p>