Crear un slider de imágenes responsive usando slick

octubre 4, 2017 at 19:28 Deja un comentario

slick es una librería javascript que con la cuál podemos crear sliders responsivos.

Para crear uno realizamos los siguientes pasos:

  • Creamos un directorio en el cuál guardar todos los archivos necesarios, en este caso se nombra como slick_gallery:
    mkdir slick_gallery
  • Entramos al directorio recién creado:
    cd slick_gallery
  • Descargamos jquery, en este caso se utiliza la versión minificada y renombramos el archivo cómo jquery.min.js:
    wget https://code.jquery.com/jquery-3.2.1.min.js -O jquery.min.js
  • Desde el repositorio slick en github descargamos los archivos necesarios para slick: slick.min.js, slick.css y slick-theme.css
    wget https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.min.js
    wget https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.css
    wget https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick-theme.css

    De manera que un listado de nuestro directorio se vería así:

    Listado archivos slick

    Listado archivos slick

  • Ahora necesitamos conseguir una o más imágenes que usar como prueba para mostrar en nuestro slider, en este caso se usan estas 6 imágenes pero podría usarse cualquiera:

    Las imágenes están nombradas como: skull_01, skull_02, skull_03, skull_04, skull_05 y skull_06.

    De manera que ahora el listado del directorio es:

    Listado directorio con imágenes

    Listado directorio con imágenes.

  • Para mostrar nuestras imágenes creamos un archivo texto llamado gallery.html:
    vim gallery.html
  • Agregamos el siguiente contenido al archivo (gist en github):
    04_html_template_0

    Plantilla básica html

    Si abrimos con un navegador web el archivo gallery.html se verá así:

    Listado imágenes

    Listado imágenes

  • Ahora modificamos gallery.html para incluir las hojas de estilo de slick y los archivos javascript de jquery y slick (gist en github):

    05_html_template_1

    Plantilla html con javascript

  • En este archivo usando la clase nombrada responsive (<div class="slider responsive" …) inicializamos el slider con:
    $(document).ready(function() {
        $('.responsive').slick({ });
    });

    Si abrimos nuevamente la página en un navegador web el slider funciona de manera básica:

    06_slick_basic

    Slick básico

  • Modificamos otra vez el archivo gallery.html para agregar breakpoints a la hora de inicializar slick, con esto se logra mostrar bien las imágenes en dispositivos de diferentes tamaños.

    En este caso especificamos breakpoints para dispositivos con anchura menor a 480px, entre 480 y 700px y mayores a 700px (gist en github):

    Plantilla html 2

    Plantilla html 2

    En el navegador el slider se ve ahora así:

    08_slick_2

    Slick básico 2×3

  • Ahora en el header agregamos un poco de css (gist en github):
    09_html_template_3

    Plantilla html 3

    La galería se ve así:

    10_slick_3

    Galería slick con css

  • Si deseamos manejar correctamente el resize podemos usar la librería smartresize.js, guardamos la librería en nuestro directorio:
    wget https://gist.githubusercontent.com/PizzaBrandon/93af5fef7d611738d354/raw/f212cc9e8268aec676ef93797a0c4d7f3fe9c21b/smartresize.js -O smartresize.js
  • Incluímos entonces el uso de smartresize (gist en github):

    11_html_template_4

    Plantilla html 4

  • El resultado final es algo parecido a esto: 12_slick_final

Listo listo.

Entry filed under: css, html, javascript, linux, programación. Tags: , , , , , .

Abrir archivos .msg desde Debian

Dejáte un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Digo yo

Que dura está la vida

Dice Jhon Lennon

La vida es lo que pasa mientras haces planes

Digo yo

Dónde haya un computín esté dónde esté algo comenzará en cero

Acerca de Mi:


Hell-Out world!!

Dice Einstein

Dios no juega a los dados

Dice Niels Bohr

Einstein no le diga a Dios lo que tiene que hacer

Dice el Che:

Seamos realistas y hagamos lo imposible.

Dice Goethe:

Lo que no comprendemos no lo poseemos.

Digo yo:

Hay que tratar de travesear todo

Dice Oscar Wilde:

Cualquier hombre puede llegar a ser feliz con una mujer, con tal de que no la ame.

Digo yo:

De fijo dijo eso porque era homosexual.

Artículos

octubre 2017
L M X J V S D
« Sep    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

A %d blogueros les gusta esto: