enero 12, 2025

Carrusel infinito con drag and drop

Hoy quiero compartir una sección que hice para un sitio web: un carrusel infinito creado con Splide.js. Este carrusel destaca por las siguientes características:

  • Auto Scroll: El carrusel se desplaza automáticamente sin intervención del usuario.
  • Infinito: Cuando las diapositivas llegan al final, el carrusel continúa desde el inicio, creando una experiencia continua.
  • Drag con reanudación automática: Los usuarios pueden arrastrar el carrusel, y este continuará rodando automáticamente al soltar.
  • Anchos variables: Las diapositivas pueden tener diferentes tamaños, añadiendo dinamismo al diseño.

Código del Carrusel

Asegúrate de incluir la librería Splide.js en tu proyecto. Ten en mente esto, se debe agregar tambien la extension austo scroll para que este haga ese efecto de marquesina (marquee).

<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"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

Aquí tienes cómo implementar este carrusel utilizando Splide.js:

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="https://picsum.photos/id/13/1200/800"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/46/1000/800"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/52/1200/800"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/57/600/800"></li>
      <li class="splide__slide"><img src="https://picsum.photos/id/62/1200/800"></li>
      <li class="splide__slide"> <img src="https://picsum.photos/id/66/600/800"></li>
    </ul>
  </div>
</div>

JavaScript

Asegúrate de incluir la librería Splide.js en tu proyecto:

Configura el carrusel con las opciones necesarias para habilitar el auto scroll, el drag y la funcionalidad infinita:

document.addEventListener("DOMContentLoaded", function () {
  window.addEventListener(
    "load",
    function () {
      const splideImages = document.querySelector(".splide");
      if (splideImages) {
        new Splide(splideImages, {
          arrows: false,
          pagination: false,
          gap: 0,
          type: "loop",
          drag: "free",
          autoWidth: true,
          autoScroll: {
            speed: 1,
            pauseOnHover: false,
            pauseOnFocus: false
          }
        }).mount(window.splide.Extensions);
      }
    },
    false
  );
});

¿Por qué Splide.js?

Elegí Splide.js porque es liviano, altamente personalizable y fácil de usar. Sus extensiones permiten integrar funcionalidades avanzadas como el auto scroll.

más artículos