Slick carousel

Question

Hello,

I was using Slick as a pluggin to create a carousel and my carousel has 5 white Divs on desktop and I wanted in mobile those 5 white Divs disappear, I used the display: None; but when I’m on mobile and I scroll to the side on my carousel, they continue there, they don’t disappear.

What can I do when I’m on mobile these 5 Divs inside the carousel do not appear?

 $('.carousel').slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 6,
  slidesToScroll: 1,
  variableWidth: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 6,
        slidesToScroll: 1,
        infinite: true,
        dots: false,
        variableWidth: false
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: false
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        arrows: false,
        variableWidth: false,
        dots: true
      }
    }
  ]
});

@media screen and (max-width: 480px) {

    .slick-slide.divbranca {
        display: none;
    }

    .slick-track.divbranca {
        display: none;
    }

    .divbranca {
        display: none;
    }
}

.slick-slide.divbranca {
        display: block;
    }

<div class="carousel">
    <div>
      <img src="img/primeira.jpg" alt="img-1" width="172px" />
      <div id="circulo-modal" class="c-1" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter1"></div>
    </div>

    <div>
      <img src="img/segunda.jpg" alt="img-2" width="159px" />
      <div id="circulo-modal" class="c-2" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter2"></div>
    </div>

    <div>
      <img src="img/terceira.jpg" alt="img-3" width="296px" />
      <div id="circulo-modal" class="c-3" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter3"></div>
      <div id="circulo-modal" class="c-4" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter5"></div>
    </div>

    <div>
      <img src="img/quarta.jpg" alt="img-4" width="296px" />
      <div id="circulo-modal" class="c-5" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter3"></div>
    </div>

    <div>
      <img src="img/quinta.jpg" alt="img-5" width="159px" />
    </div>

    <div>
      <img src="img/sexta.jpg" alt="img-6" width="166px" />
      <div id="circulo-modal" class="c-6" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter6"></div>
    </div>

    <div class="divbranca" style="background-color: white; width: 172px;"></div>
    <div class="divbranca" style="background-color: white; width: 159px;"></div>
    <div class="divbranca" style="background-color: white; width: 296px;"></div>
    <div class="divbranca" style="background-color: white; width: 296px;"></div>
    <div class="divbranca" style="background-color: white; width: 159px;"></div>

  </div>

Answer 1

Slick has a method for filtering slides by class.

function updateSlides() {
    if($(document).width() < 480) {
      $('.carousel').slick('slickFilter',':not(.divbranca)');
    }

    if($(document).width() > 480) {
      $('.carousel').slick('slickUnfilter');
    }
}

$(document).ready(function(evt) {
    updateSlides();
});

$(window).resize(function(evt){
    updateSlides();
});