Guia prático do carrossel Splide

Você já precisou adicionar a funcionalidade de carrossel em algum projeto WordPress? Uma hora ou outra esse tipo de solicitação acontece. E eu sempre fico pesquisando uma biblioteca JavaScript ou jQuery que ajude nessa tarefa.

Mas em um projeto recente que fiz, fluiu tão bem o uso da biblioteca Splide, que eu resolvi documentar como foi o processo caso você também esteja tentando configurar ele no seu projeto.

Para começar, na página inicial, clique em “Download” e baixe a pasta ZIP.

São vários arquivos dentro da pasta, mas eu recomendo que pegue apenas 2:

1. dist/js/splide.min.js
2. dist/css/splide-core.min.css

Segundo a documentação, esses são os únicos arquivos necessários para fazer o Splide funcionar.

Agora você só precisa requisitar esses arquivos na página que quiser utilizar o carrossel.

Clique caso queira saber como adicionar estilos e scripts ao WordPress.

Veja abaixo a estrutura básica HTML que você precisa para que o Splide funcione.

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</div>
Code language: HTML, XML (xml)

Agora você só precisa ativar o Splide como no exemplo abaixo.

var splide = new Splide( '.splide', {
  type   : 'loop',
  perPage: 3,
  perMove: 1,
} );

splide.mount();
Code language: JavaScript (javascript)

Lembre de esperar a página carregar por completo antes de ativar o Splide como no exemplo abaixo com jQuery.

jQuery(document).ready(function($) {
 // Código
});
Code language: JavaScript (javascript)

Além de type, perPage e perMove – existem diversas outras opções para customizar o seu carrossel.