Slick js doesn't work on mobile, only on desktop

[ChristianoBourguignon]

I don't know why, but when I access my website through my pc the slider works correctly, now on the phone only the main slider is left, why is that?

My css code:

.carousel.slick-initialized{
    visibility:visible;
    opacity:1;
}

.carousel .slick-slider{
    display:none ;
}

.carousel .slick-slider:first-child{
    display:block; visibility:hidden;
} 

.carousel.slick-initialized .slick-slider{
    display:block!important;visibility:visible!important;
}

My requests and JS

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function() {
    $('.carousel').slick({
        infinite: true,
        dots: true,
        arrows:false,
        autoplay: true,
        autoplaySpeed: 6000,
        arrows:false,

  });

[robhowells]

@ChristianoBourguignon if I've understood your question correctly it sounds like you might need to use the responsive option, where you can set how many slides you want to display at different breakpoints.

E.g.

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

From the 'Responsive display' section here: https://kenwheeler.github.io/slick/

[ChristianoBourguignon]

@ChristianoBourguignon se entendi corretamente sua pergunta, parece que você pode precisar usar a opção, onde você pode definir quantos slides você deseja exibir em diferentes pontos de interrupção.responsive

E.g.

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

Da seção 'Exibição responsiva' aqui: https://kenwheeler.github.io/slick/

Sorry if it was not very well explained, I am horrible at that .. But anyway, the slider works perfectly on the desktop, but on the phone it only shows one image, it does not change the banner

you can see this by accessing makobaby.com.br on the pc (simulated mobile for you to see how it would look on the phone) and on the phone (it does not appear the other sliders)

note: all my sliders are in the slick-slider class and only the main one (the only one shown on the phone) is missing, so I believe it is something in the css, but this CSS is to hide the sliders during loading

[ChristianoBourguignon]

@ChristianoBourguignon se entendi corretamente sua pergunta, parece que você pode precisar usar a opção, onde você pode definir quantos slides você deseja exibir em diferentes pontos de interrupção.responsive

E.g.

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

Da seção 'Exibição responsiva' aqui: https://kenwheeler.github.io/slick/

Summary: it is a banner using to serve different image sizes, but on mobile it seems that I did an "unslick" and left the others hidden