Creando un Carousel Custom con Javascript

Creando un Carousel Custom con Javascript

En este post te voy a mostrar como crear un carousel custom de forma fácil, complementando dos librerías de javascript completamente independientes entre sí, pero que pondremos a trabajar en conjunto.

Existe un principio básico en programación web que habla de "no reinventar la rueda", básicamente porque muchas de las necesidades que nos surgen como desarrolladores ya han sido resueltas (total o parcialmente) por otra persona que ya tuvo nuestra misma necesidad. Esta premisa de no volver a desarrollar algo que ya existe es la que dio vida a los frameworks que usamos diariamente.

Hace unos días estuve trabajando en el diseño de un nuevo sitio web, y a pedido del cliente necesitaba implementar un carousel "above the fold", pero no el típico carousel tradicional, quería hacer algo que le de un poco de originalidad al sitio. Recordé haber visto en algún momento una librería Javascript para simular la escritura por teclado de palabras o frases que configuremos, y me pareció un buen complemento para el carousel.

Hice varios mockups en papel para trabajar la idea (Si! Lo que leyeron. Antes de tocar una tecla lleven sus ideas al papel, es lo mejor.) y luego me puse a buscar que librerías podía aprovechar para mi carousel custom.
Sabia que quería usar Flickity porque es genial, ya lo había usado antes y es muy customizable, pero necesitaba un efecto de fade entre los slides y esa característica no estaba incluida, de todas formas el mismo creador de Flickity recomendaba Slick a los que necesitaban esta feature, así que me fui por ese lado. Googleando también me cruce con Typed.js, la pata que me faltaba para lograr lo que había hecho en el papel.

En resumen estas son las librerías que usaremos:

  • Slick: es un carousel responsive que funciona con CSS3 y también tiene muchas opciones para customizar su funcionamiento. La contra es que necesita de jQuery para funcionar :(

  • Typed.js: La descubrí navegando la web de NewsAPI mientras desarrollaba Nius, mi primera aplicacion ReactJS, te invito a darle una mirada :)

La idea es simple, Typed va a escribir una palabra por cada servicio que brinda la empresa y al hacerlo dispara una acción para que el slider se "mueva" a la siguiente imagen, relacionada con ese servicio en especifico.

Ahora si! Despues de tanta introducción, vamos al código.

En primer lugar vamos a creamos un archivo index.html con la estructura básica. Emmet puede ayudarte a crear una estructura como la siguiente solo ingresando !+TAB ;)

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Carousel Custom</title>
</head>  
<body>  


Lo siguiente sera importar nuestras librerías, preferentemente de algún CDN, estas dos se pueden encontrar en cdnjs.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Carousel Custom</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
</head>  
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
</body>  
</html>  


Recuerden siempre incluir el código Javascript al final de la etiqueta body para evitar bloqueos del render de la pagina durante la carga.

Como podemos ver en el código anterior, Typed consta de un único archivo javascript, mientras que Slick también necesita de un CSS para estilizar el carousel. Como primer dependencia va jQuery dado que es necesario para que Slick pueda funcionar.

Ahora pasemos a incluir la estructura html de nuestro carousel custom al inicio del body:

<div class="slider">  
    <div class="slider-img-container">
        <div class="slider-img">
            <div class="slide"><img src="static/img/slide_molderia.jpg" alt="Molderia"></div>
            <div class="slide"><img src="static/img/slide_corte.jpg" alt="Corte"></div>
            <div class="slide"><img src="static/img/slide_confeccion.jpg" alt="Confección"></div>
            <div class="slide"><img src="static/img/slide_lavado.jpg" alt="Lavado"></div>
            <div class="slide"><img src="static/img/slide_prepack.jpg" alt="Pre-pack"></div>
        </div>
    </div>
    <div class="slider-text-container">
        <div class="slider-text">
            <p class="fixed-text">integramos cada<br>parte del proceso<br>productivo textil</p>
            <span class="typed"></span>
        </div>
    </div>
</div>  


El carousel se compone de dos partes: por un lado tenemos cinco slides que contiene una imagen cada uno, y por otro el texto que Typed irá se encargara de modificar en la etiqueta <span class="typed"></span>.

Solo resta configurar las librerías para que puedan funcionar en conjunto, para ello vamos a agregar dos etiquetas script antes del cierre del body, en una vamos a configurar Slick y en la otra Typed.

Slick
<script>  
    $('.slider-img').slick({
        dots: false,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear',
        accessibility: false,
        arrows: false,
        draggable: false,
        pauseOnHover: false,
        swipe: false,
        touchMove: false
    });
</script>  


En el código anterior asignamos Slick a la etiqueta con clase .slider-img y seteamos algunas propiedades de configuración para lograr que funcione de la forma deseada, ej: loop infinito, cambio de slide en .5s con efecto fade lineal, quito los dots y flechas de cambio de slide, y deshabilito los eventos de mouse y touch. Acá pueden ver el resto de las opciones de configuración.

Typed
<script>  
    var typed = new Typed('.typed', {
        strings: ["Molderia", "Corte", "Confección", "Lavado", "Pre-pack"],
        typeSpeed: 100,
        backSpeed: 50,
        smartBackspace: false,
        backDelay: 5000,
        loop: true,
        preStringTyped: function(pos, self) { changeSlide(); }
    });

    var i = false;

    function changeSlide() {
        if(i == true) {
            $('.slider-img').slick("slickNext");
        } else {
            i = true;
        }
    }
</script>  


En primer lugar creamos el objeto Typed y le decimos que va a actuar sobre la etiqueta con clase .typed, también le pasamos como parámetro las opciones de configuración:

strings -> Pasamos un array con las palabras o frases que se van a iterar
typeSpeed -> Seteamos la velocidad de escritura en 100ms
backSpeed -> Seteamos la velocidad de borrado en 50ms
smartBackspace -> Desactivo la función de borrado inteligente
backDelay -> El delay entre cada iteración es de 5s
loop -> Lo dejamos funcionando en un loop infinito

preStringTyped es un evento que se dispara inmediatamente antes de cada iteración, y nos permite ejecutar código cada vez que el evento sea llamado. Este es el engranaje principal de nuestro carousel ya que va a actuar como nexo entre Slick y Typed para que se produzca el cambio de slide. Cada vez que se dispare el evento se va a ejecutar la función changeSlide que se encargara de cambiar al siguiente slide usando el método slickNext de Slick, pero para que funcione de la forma correcta es necesario hacer un pequeño hack dado que Typed dispara preStringTyped incluso antes de escribir la primera palabra, causando que nuestras dos librerías se desfasen. La solución es básica, seteo el flag i = false y solo ejecuto el cambio de slide cuando i = true. La primera iteración solo se encargara de setear el flag a true y a partir de la segunda iteración se ejecutara el código que cambia de slide.



Con estas pocas lineas de código logramos crear nuestro carousel custom. Genial no es cierto?
Hasta aquí no le hemos dado ningún estilo CSS ya que quedara a decisión de cada uno adaptarlo al diseño de su pagina web, de todas formas en el botón de abajo van a poder descargar el código con estilos ya definidos, para que puedan usarlo como punto de partida para crear su propio carousel ;)


DESCARGAR CÓDIGO



Si este post te llega a ser de utilidad contamelo en los comentarios o escribirme a hola@luciano.im.




Post picture by Christopher Gower

comments powered by Disqus