flickity-teaser_EN

Flickity: hermosas galerías en todos los dispositivos: receptivo y con control de gestos

Hay varias soluciones para crear galerías a través de JavaScript. Pero a veces puede encontrar que el manejo no es convincente, otras proporcionan una funcionalidad bastante pobre. Flickity, sin embargo, es un marco de JavaScript de última generación para galerías que funciona muy bien en computadoras de escritorio, así como en dispositivos móviles. La galería responde y se puede controlar con el mouse o los gestos, o incluso con el teclado. Gracias a CSS3 puedes navegar rápidamente a través de galerías con animaciones.

Integrado y configurado rápidamente

Si no desea leer la documentación, puede integrar rápidamente Flickity en su proyecto sin ninguna configuración adicional. Debe agregar un archivo JavaScript para la funcionalidad y un archivo de hoja de estilo para el diseño y las transiciones animadas al encabezado HTML. Luego puede marcar la galería a través de HTML. Defina un elemento contenedor que envuelva todos los elementos de la galería y asígnele las clases «gallery» y «js-flickity». Puede ser un elemento

o cualquier otro elemento de bloque, por ejemplo,

. Agregue la clase «galería-celda» a cada elemento de la galería. También puede ser un elemento

que envuelve, por ejemplo, imágenes u otro contenido. Pero también puedes usar un elemento . Eres completamente libre de elegir los elementos que funcionan mejor para ti.

<figure class="gallery js-flickity">
  <img src="https://www.noupe.com/development/1.jpg" class="gallery-cell" />
  <img src="2.jpg" class="gallery-cell" />
  <img src="3.jpg" class="gallery-cell" />
  …
</figure>

En el ejemplo anterior, un elemento

se define como contenedor y tres elementos como contenido para la galería. Y eso es todo lo que necesita hacer si desea crear una galería receptiva con Flickity. Los botones se pueden agregar a través de JavaScript. Hay dos botones de flecha para saltar a la imagen siguiente o anterior. Además, también puede navegar directamente a cada imagen en la galería, usando el punto de navegación en la parte inferior. Por si fuera poco, también puedes navegar por la galería mediante la función de arrastrar de tu ratón. Se proporciona control de gestos para dispositivos móviles.

Diseño estándar con la imagen seleccionada que se muestra en el centro
Diseño estándar: la imagen seleccionada se muestra en el centro

Los botones de flecha se marcan a través del elemento

#Flickity #hermosas #galerías #todos #los #dispositivos #receptivo #con #control #gestos

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.