Slick slider

Name: Slick slider
Brand: Jose Aguilar
SKU: joseaguilarblog-7692
Availability: InStock
Rating: 5 (2 reviews)

Slick es un complemento jQuery de carrusel receptivo que admite múltiples puntos de interrupción, transiciones CSS3, eventos táctiles y deslizantes y mucho más.

En la web oficial se define como el último carrusel que necesitarás.

La verdad es que lo he estado usando últimamente en varios proyectos y me sorprendido bastante.

Descarga y uso de Slick

En la página oficial de Slick te muestran como incorporarlo a través de CDN o incorporando los ficheros a tu proyecto.

A mi siempre me gusta optar por la segunda opción pero eso va a gusto del programador.

Una vez te has descargado el proyecto desde la página oficial, tan solo tienes que incorporar en tu proyecto la carpeta slick que es donde están los recursos CSS y JavaScript que necesitas para hacerlo funcionar.

Luego, en la cabecera de tu documento HTML, puedes agregar las hojas de estilos que necesitarás:

Source code

<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

El código JavaScript requerido también se puede poner en la cabecera pero por temas de carga de la página y rendimiento es mejor ponerlo al final del documento HTML justo antes del cierre de la etiqueta </body>:

Source code

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

Estoy incluyendo 2 ficheros:

La librería jQuery.
El plugin Slick.

Slider Vertical con Slick

Uno de los ejemplos que quiero ilustrar es el control de diapositivas con iteración vertical.

En el cuerpo de tu página o dentro del <body> en el lugar deseado puedes añadir una sección con las diapositivas de la siguiente forma:

Source code

<section class="vertical-slider slider">
    <div>
        <img src="images/1.jpg">
    </div>
    <div>
        <img src="images/2.jpg">
    </div>
    <div>
        <img src="images/3.jpg">
    </div>
    <div>
        <img src="images/4.jpg">
    </div>
    <div>
        <img src="images/5.jpg">
    </div>
    <div>
        <img src="images/6.jpg">
    </div>
</section>

En este caso, vamos a ilustrar un ejemplo con 6 diapositivas para que se pueda ver bien la funcionalidad.

Justo antes de la etiqueta de cierre del </body> puedes hacer una llamada al plugin como la que sigue:

Source code

$(".vertical-slider").slick({
    dots: true,
    vertical: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1
});

Es una llamada al plugin con establecimiento de varios parámetros. En este caso, estoy indicando que:

quiero que se muestren los puntitos de navegación debajo de las diapositivas.
la iteración o movimiento de diapositivas será vertical.
modo centrado.
de entrada solo quiero mostrar una diapositiva.
al pasar a la siguiente que solo se mueva una diapositiva.

Con esta llamada conseguimos algo como lo que se muestra en la siguiente imagen:

Slider vertical con Slick

Slider Horizontal con Slick

El slider horizontal es el típico que aparece en casi todas las páginas de los diseños de plantillas de tiendas online y páginas web.

Es muy usado para destacar contenido importante u ofertas.

En el cuerpo de la página puedes añadir una sección muy parecida a la anterior:

Source code

<section class="horizontal-slider slider">
    <div>
        <img src="images/1.jpg">
    </div>
    <div>
        <img src="images/2.jpg">
    </div>
    <div>
        <img src="images/3.jpg">
    </div>
    <div>
        <img src="images/4.jpg">
    </div>
    <div>
        <img src="images/5.jpg">
    </div>
    <div>
        <img src="images/6.jpg">
    </div>
</section>

Lo único que cambia es la clase de la sección.

El efecto de control deslizante lo podemos conseguir con una llamada al plugin sin parámetros:

Source code

$(".horizontal-slider").slick();

Para conseguir como resultado:

Slider horizontal con Slick

Slider textual con Slick

De la misma forma que puedes controlar diapositivas con imágenes, también los puedes hacer con texto.

slider textual con slick

Carrusel de imágenes con Slick

Puedes mostrar carruseles de imágenes como los siguientes:

Carousel de imágenes con Slick

Usando la siguiente llamada:

Source code

$('.carousel').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1
});

Carrusel de contenido HTML con Slick

Un de los puntos que más me ha gustado es que puedo montar un control de diapositivas de cualquier cosa.

En el ejemplo en funcionamiento podrás iterar o mover elementos de tipo card de Bootstrap.

En el lugar que quieras de tu documento HTML puedes agregar tu sección con carrusel de contenido HTML.

Por ejemplo:

Source code

<section class="card-carousel">
    <div class="card">
        <h5 class="card-header">¿Qué es Lorem Ipsum?</h5>
        <div class="card-body">
            Texto de relleno de las imprentas y archivos de texto.
        </div>
        <div class="card-footer d-flex justify-content-center">
            <a href="#" class="btn btn-primary">Ver mas</a>
        </div>
    </div>
    <div class="card">
        <h5 class="card-header">¿Por qué lo usamos?</h5>
        <div class="card-body">
            El contenido del texto de un sitio mientras que...
        </div>
        <div class="card-footer d-flex justify-content-center">
            <a href="#" class="btn btn-primary">Ver mas</a>
        </div>
    </div>
    <div class="card">
        <h5 class="card-header">¿De dónde viene?</h5>
        <div class="card-body">
            El texto de Lorem Ipsum no es simplemente texto aleatorio.
        </div>
        <div class="card-footer d-flex justify-content-center">
            <a href="#" class="btn btn-primary">Ver mas</a>
        </div>
    </div>
    <div class="card">
        <h5 class="card-header">¿Dónde conseguirlo?</h5>
        <div class="card-body">
            En su página oficial está disponible.
        </div>
        <div class="card-footer d-flex justify-content-center">
            <a href="#" class="btn btn-primary">Ver mas</a>
        </div>
    </div>
    <div class="card">
        <h5 class="card-header">Ejemplo lorem ipsum</h5>
        <div class="card-body">
            Lorem ipsum... Texto aleatorio para tus diseños
        </div>
        <div class="card-footer d-flex justify-content-center">
            <a href="#" class="btn btn-primary">Ver mas</a>
        </div>
    </div>
    <div class="card">
        <h5 class="card-header">Texto aleatorio</h5>
        <div class="card-body">
            Texto aleatorio para mis demos
        </div>
        <div class="card-footer d-flex justify-content-center">
            <a href="#" class="btn btn-primary">Ver mas</a>
        </div>
    </div>
</section>

Con llamada al plugin:

Source code

$('.card-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
});

Para conseguir como resultado:

Carrusel con contenido HTML con Slick

Características principales

Totalmente adaptable a todos los dispositivos. Muy importante hoy en día.
Configuraciones separadas por punto de interrupción. Se puede definir el número de diapositivas a mostrar en cada dispositivo.
Utiliza CSS3 cuando está disponible. Completamente funcional cuando no.
Deslizamiento con el dedo habilitado aunque también se puede deshabilitar.
Arrastramiento de diapositivas con el ratón.
Bucle infinito.
Accesible con las flechas del teclado.
Se pueden añadir, eliminar y filtrar diapositivas.
Reproducción automática.
Puntos de navegación.
Flechas de navegación.
Funciones de llamada.
Múltiples controles deslizantes en la misma página.

Y mucho más que puedes ver en su página oficial.

Para más información, la fuente de origen también está disponible en Github.

Slick en Github

Conclusiones

Mi última experiencia ha sido probar varios plugins que permiten incorporar un carrusel de imágenes en un desarrollo Ecommerce con PrestaShop.

Necesitaba mostrar en formato carrusel todas las listas de productos que aparecen en la página de inicio.

Probé varios plugins de carousel sin éxito hasta encontrar Slick que se adaptó casi a la perfección. Tan solo tuve que hacer algún pequeño ajuste con CSS para adaptarlo al diseño.

Por ese motivo, creo que no es un desperdicio compartirlo con vosotros ya que se que os va a ayudar fácilmente.

Ver demo Descargar