Olá pessoal! No artigo de hoje vamos conhecer e aprender como utilizar o Plugin “Wp Slick Slider and Image Carousel” que nos auxilia a inserir sliders profissionais e carrosséis em nossos temas.

Exiba vários sliders e carrossel de imagens usando shortcodes com categoria. Totalmente responsivo, Swipe ativado, Drag and Drop para desktop e looping infinito. Totalmente acessível com navegação via teclado, autoplay, pontos, setas etc.

Ele usa um tipo personalizado de post e taxonomia para criar um slider, com opções praticamente ilimitadas e suporte para múltiplos sliders em qualquer página. Você também usar um slider no cabeçalho do seu site.

O primeiro passo é instalar o Plugin no seu WordPress. Vá até o menu Plugins -> Adicionar novo. Pesquise pelo nome “Wp Slick Slider and Image Carousel”. O resultado deve ser similar à este:

wp-slick-slider-and-image-carousel

Com o plugin instalado, podemos prosseguir com o artigo. No final do post, adicionei os 5 designs de utilização do plugin para que você o veja em ação. É claro que neste exemplo, algumas imagens não são as melhores para o caso de texto sobreposto, mas serve para se ter uma ideia de como funciona os desings. Você pode encontrar todos os designs no menu Slider Slick -> Slider Designs. Basta copiar o código abreviado de desenho que você gosta e usar.

 

Dois shortcodes estão disponíveis para utilização:

[[slick-slider]] e [[slick-carousel-slider]]

Para o primeiro shortcode, esta é a aplicação com todos os parâmetros possíveis:

[[slick-slider  design="design-1" category="8" show_content="true"
 dots="true" arrows="true" autoplay="true" sliderheight="400"
 autoplay_interval="5000" speed="1000"]]

Para o segundo shortcode, esta é a aplicação com todos os parâmetros possíveis:

[[slick-carousel-slider  design="design-6" category="8"
 slidestoshow="4" slidestoscroll="1" dots="true"
 arrows="true" autoplay="true"  autoplay_interval="5000"
 speed="1000" centermode="true" variablewidth="true"]]

Para aplicar diretamente no seu template no código php, use a seguinte forma, aplicando os parâmetros que achar conveniente:

<?php echo do_shortcode('[[slick-slider]]'); ?>  e
<?php echo do_shortcode('[[slick-carousel-slider]]'); ?>

Para facilitar o entendimento dos parâmetros disponíveis, segue uma lista explicativa de cada um deles, levando em consideração cada shortcode em separado.

Parâmetros disponíveis para o shortcode:

[[slick-slider]]
  • limit : [[slick-slider limit="-1"]] (Limit define o número de imagens a serem exibidas por vez. Por padrão, é definido em “-1″ que faz exibir todas as imagens. Se você quiser exibir somente 5 imagens, altere o valor para limit=”5”)
  • category: [[slick-slider category="category_ID"]] ( exibe os slides usando o ID da categoria como filtro ).
  • show_content : [[slick-slider show_content="true" ]] (Exibe ou não o texto do slide. Por padrão, o valor é “true”. As opções são: “true ou false”).
  • Pagination and arrows : [[slick-slider dots="false" arrows="false"]] (Define a exibição ou não das setas e pontos. As opções são: “true ou false”)
  • Autoplay and Autoplay Interval: [[slick-slider autoplay="true" autoplay_interval="100"]] (Define se o slider desliza automaticamente e qual o tempo de espera para troca. Autoplay pode ser “true ou false” e autoplay_interval é um número inteiro em milisegundos)
  • Slide Speed: [[slick-slider speed="3000"]] (Define a velocidade da passagem do slider. O valor é em milisegundos)
  • fade : [[slick-slider fade="true" ]] (Efeito Fade do Slider. Por padrão, o efeito é slide. Se você alterar o valor de fade para “true”, o slide será trocado com o efeito fade.
  • sliderheight : [[slick-slider sliderheight="400" ]] (Altura do Slider. Por padrão, são 500px.)

Parâmetros disponíveis para o shortcode:

[[slick-carousel-slider]]
  • limit : [[slick-slider limit="-1"]] (Limit define o número de imagens a serem exibidas por vez. Por padrão, é definido em “-1″ que faz exibir todas as imagens. Se você quiser exibir somente 5 imagens, altere o valor para limit=”5”)
  • design : [[slick-carousel-slider design="design-1"]] (Você pode selecionar entre 5 designs( design-1, design-2, design-3, design-4, design-5 ) para seu slider.  Veja as opções disponíveis em Slick Slider -> Slider Designs ).
  • category: [[slick-slider category="category_ID"]] ( Exibe os slides usando o ID da categoria como filtro ).
  • image_size : [[slick-carousel-slider image_size="large"]] (Define o tamanho da imagem. O padrão é “medium”, os valores disponíveis são thumbnail, medium, large, original)
  • slidestoshow : [[slick-carousel-slider slidestoshow="3" ]] (Define a quantidade de imagens (entenda como colunas) a exibir em cada passagem do carrossel. O padrão é  “3”).
  • slidestoscroll : [[slick-carousel-slider slidestoscroll="1" ]] (Define a quantidade de imagens a passar no scroll. Por padrão é “1”).
  • Pagination and arrows : [[slick-slider dots="false" arrows="false"]] (Define a exibição ou não das setas e pontos. As opções são: “true ou false”)
  • Autoplay and Autoplay Interval: [[slick-slider autoplay="true" autoplay_interval="100"]] (Define se o slider desliza automaticamente e qual o tempo de espera para troca. Autoplay pode ser “true ou false” e autoplay_interval é um número inteiro em milisegundos)
  • Slide Speed: [[slick-slider speed="3000"]] (Define a velocidade da passagem do slider. O valor é em milisegundos)
  • centermode : [[slick-carousel-slider centermode="true" ]] ( Exibe a imagem principal no meio. O padrão é “false” ).
  • variablewidth : [[slick-carousel-slider variablewidth="true" ]] (Define como variável a largura das imagens. O padrão é “false”)

 

Para cadastrar um novo slide, basta ir ao menu Slick Slider -> Add slide, definir um título para o slide, inserir um texto no corpo do post caso deseje uma descrição, colocar a imagem do slide como imagem destacada, definir uma categoria caso deseje usá-la como filtro do slider e salvar.

 

[[slick-slider design="design-1"]]
[slick-slider design="design-1"]
[[slick-slider design="design-2"]]
[slick-slider design="design-2"]
[[slick-slider design="design-3"]]
[slick-slider design="design-3"]
[[slick-slider design="design-4"]]
[slick-slider design="design-4"]
[[slick-slider design="design-5"]]
[slick-slider design="design-5"]

Posts relacionados