¿Que es un slider?
Un slider es un elemento de diseño web interactivo que muestra múltiples imágenes, textos o elementos multimedia de forma secuencial, colocado típicamente en la parte superior de una página, este elemento cautivador permite a los usuarios explorar contenido relevante mediante deslizamiento o clic en controles intuitivos.
En esta ocasión, exploraremos juntos cómo maximizar el potencial de tu presentación visual mediante la configuración de un slider con Splide.
Ejemplo básico de Splide
A continuación te muestro una configuración básica de Splide, solo es necesario HTML y JavaScript, como también agregar los CDN o descargar los archivos de la librería que se encuentra en la documentación, actualmente se encuentra en la versión 4.1.4.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" defer></script>
See the Pen Basic slide by Alam (@alamdtech) on CodePen.
Diseño responsivo
Splide te ofrece breakpoints para adaptar tu slider tanto para escritorio, tablet o móvil. En el siguiente ejemplo en escritorio se muestran 3 slides por página y cuando es menor a 768px se van a mostrar 2 y en móvil solo 1.
document.addEventListener('DOMContentLoaded', function () {
new Splide('.splide', {
perPage: 3,
breakpoints: {
768: {
perPage: 2,
},
480: {
perPage: 1,
},
}
}).mount();
});
Splide te ofrece muchas configuraciones, las cuales puedes ver en la documentación oficial que puedes encontrar aquí. Cuentas con diferentes opciones para la integración como Reac, Vue, Svelte o el ejemplo que vimos en este post.