Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como deixar slick carousel mais responsivo?

Olá!

Estou "copiando" um site para estudo, e nele há um carrossel que, quando a página é redimensionada, a quantidade de caixas mostrada é diminuída ou aumentada. Estou criando o site em mobile-first, então gostaria de adicionar caixas conforme a largura da página aumenta. Há alguma maneira de fazer isso por meio de media queries no JS, já que é nele que o slick é configurado?

Site original: https://www.viacaotrevisan.com.br/ Estudo: https://github.com/ViniBortoletto/mobile-viacao-trevisan

Agradeço se puderem ajudar. :)

4 respostas

Vinicius, boa tarde!

Você pode usar uma função do JQuery para verificar se o tamanho da tela foi diminuido, caso seja, ele recalcula o slide

$(window).resize(function(){
  $('.my-slider')[0].slick.refresh();
});

Espero ter ajudado e bons estudos!

Olá Felipe.

Mas como uso a função? Gostaria que, conforme eu aumente a tela, o número de caixas aumentei de 1, para 2, 3 etc.

Vinicius, boa tarde!

Você diz em relação ao número de slides mostrados? (Quanto maior mais slides?), ou é em relação a aumentar o tamanho do slide para que ele fique sempre com o tamanho cheio independente do tamanho da tela?

solução!

Opa Felipe,

Desculpa se não fui claro na pergunta. A ideia era fazer com que mais slides fossem aparecendo conforme eu redimensionasse a página. Por exemplo, mobile aparece 1 slide, tablet aparece 2, etc. Encontrei uma maneira de fazer isso pelo JS, meio que criando media queries com os if/else if.

window.onload = function init() {

  let mobile = window.matchMedia("(max-width: 767px)"); //1
  let miniTablet = window.matchMedia("(max-width: 853px)"); //2
  let bigTablet = window.matchMedia("(max-width: 1023px)"); //3
  let desktop = window.matchMedia("(max-width: 1999px)"); //4
  // let widescreen = window.matchMedia("(min-width: 2560px)"); //6


  if (mobile.matches) {

    $(document).ready(function () {
      $('.slider').slick({
        infinite: true,
        slidesToShow: 1
      });
    });

  } else if (miniTablet.matches) {

    $(document).ready(function () {
      $('.slider').slick({
        infinite: true,
        slidesToShow: 2
      });
    });

  } else if (bigTablet.matches) {

    $(document).ready(function () {
      $('.slider').slick({
        infinite: true,
        slidesToShow: 3
      });
    });

  } else if (desktop.matches) {

    $(document).ready(function () {
      $('.slider').slick({
        infinite: true,
        slidesToShow: 4
      });
    });

  } else {

    $(document).ready(function () {
      $('.slider').slick({
        infinite: true,
        slidesToShow: 5
      });
    });

  }
};

Isso resolveu meu problema por enquanto. Obrigado pela ajuda! :D