Exibir Carrossel SlickJs somente no Mobile

Essa dica serve para quem esta iniciando na programação e precisa exibir o SlickJs somente para dispositivos móveis ou até uma certa resolução.

Exibir SlickJs somente no Mobile

Imagine que você quer exibir o seu Slider se o tamanho for até 768px;

(function(){
    // container alvo
    if(document.querySelector('.targetContainer'))  {
      $('.targetContainer').slick({
          infinite: true,          
          dots: false,
          centerMode: false,
          autoplay: 1,
          slidesToShow: 3,
          slidesToScroll: 1,
          arrows: true,
          infinite: true,
          mobileFirst:true,
          responsive: [{
              breakpoint: 768,
              settings: 'unslick'
          }],
      });
    }
  })();

No exemplo acima o carrossel será carregado somente até 768px de largura, exibindo 3 slides e adicionando 1 de cada vez, se for maior o 'unslick' é chamado e o slick é removido do targetContainer.

Você também pode usar um css enquanto o SlickJs carrega o seu carrossel.

.targetContainer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease
}
.targetContainer.slick-initialized {
    visibility: visible;
    opacity: 1
}

Dica simples e rápida.