Exibir Carrossel SlickJs somente no Mobile

Precisa ativar o SlickJs somente para dispositivos mobile?

Eric Mariano

0 min

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.

Learn

Support

More Options