Login
Andre Publicado em 30/03/2022, atualizado em 25/04/2022
JavaScript Snippets

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.

Deixe um comentário

O seu endereço de e-mail não será publicado.