Crear un Slider/Carousel con SplideJS
SplideJS es una libreria ligera para crear sliders o carouseles con javascript, la libreria esta inicialmente creada en typescript.
La libreria SplideJS cuenta con una sencilla instalacion y con buenas opciones de configuracion o personalizacion.
Para descargar la libreria vamos a usar NPM que ya es habitual en la mayoria de las librerias.
npm install @splidejs/splide
Con este comando se va a descargar la libreria y se guardaran los archivos en la carpeta node_modules/@splidejs/splide/dist/
Codigo
Lo siguiente sera crear un HTML con lo basico y ademas vamos a incluir los archivos js/splide.min.js y css/splide.min.css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Splide Ejemplo 1</title> <link rel="stylesheet" type="text/css" href="node_modules/@splidejs/splide/dist/css/splide.min.css"> <script type="text/javascript" src="node_modules/@splidejs/splide/dist/js/splide.min.js"></script> </head> <body> <h1>Ejemplo de Slider con SplideJS</h1> <!-- EL SLIDER VA AQUI --> </body> </html>
Ya con la plantilla basica HTMLK ahora vamos a agregar la estructura de nuestro slider.
<section class="splide" aria-label="Splide Basic HTML Example"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img src="images/image1.png"/></li> <li class="splide__slide"><img src="images/image2.png"/></li> <li class="splide__slide"><img src="images/image3.png"/></li> </ul> </div> </section> <!-- TERMINA EL SLIDER -->
La estructura es un contenedor, una lista y los elementos de la lista que son los elementos de el slider, en este caso cada elemento se le agrega una imagen para que la imagen cambie cada vez que presionemos los botones de cambio.
Por ultimo falta inicializar o activar el slider, esto ya se hace con javascript.
<script>
document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '.splide' );
splide.mount();
} );
</script>
Resultado
El resultado es simple y bonito.
Y listo ahora ya pueden crear ustedes sus propias pruebas.
Pagina oficial. https://splidejs.com/?href=evilnapsis