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:

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-2"]

[slick-slider design="design-3"]

[slick-slider design="design-4"]

[slick-slider design="design-5"]