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

Los botones de flecha se marcan a través del elemento , la navegación de puntos como una lista a través de los elementos

y
• . Las flechas de los botones son SVG. Los elementos del menú de la navegación de puntos están diseñados con CSS. La hoja de estilo es responsable de la animación cuando cambia de una imagen a otra. Si no especifica el ancho de la galería, se aplicará el ancho del elemento principal. Sin embargo, esto no afecta el tamaño de las imágenes. Según el ancho, verá elementos de la galería junto al elemento activo en el sangrado. Si cambia el ancho del navegador, la galería se ajustará automáticamente al nuevo ancho. Lo mismo sucede cuando cambias la orientación de la pantalla en los dispositivos móviles. Si bien las imágenes son una aplicación clásica para una galería, Flickity no se reduce a imágenes. Como ya se mencionó, puede marcar cualquier elemento como un elemento de la galería usando «galería-celda». Puede contener cualquier contenido como textos o textos junto con imágenes.
  

  Alta flexibilidad debido a varias configuraciones

  Flickity viene con una gran cantidad de configuraciones y se puede personalizar según sus necesidades. Los parámetros de configuración se definen a través del atributo de datos «data-flickity-options» directamente en el elemento contenedor de la galería. Se asignan como objetos JSON. Por lo tanto, puede deshabilitar ambos menús: el botón siguiente y anterior y el punto de navegación.

  <figure class="gallery js-flickity" data-flickity-options="{"prevNextButtons": false, "pageDots": false}">
    …
  </figure>

  Como los parámetros dentro del objeto JSON requieren comillas dobles, el propio objeto JSON debe asignarse entre comillas simples al atributo de datos. En el ejemplo anterior, todos los elementos del menú se eliminan a través de «prevNextButtons» y «pageDots». Luego puede navegar solo con su mouse o gestos. También puede personalizar el diseño de la galería alineando los elementos individuales a través de «cellAlign». Se pueden mostrar alineados a la izquierda, alineados a la derecha o centrados.

  <figure class="gallery js-flickity" data-flickity-options="{"cellAlign": "left"}">
    …
  </figure>

  

  El parámetro «contener» llena todo el ancho de la galería con los elementos de la galería. El primer elemento de la galería se mostrará en el borde izquierdo, el último elemento en el borde derecho. Por lo tanto, no habrá espacio vacío.

  <figure class="gallery js-flickity" data-flickity-options="{"contain": true}">
    …
  </figure>

  

  Una cosa que me gustaría señalar es que puede permitir el desplazamiento libre usando «freeScroll». Evita que la imagen activa se alinee automáticamente en la posición definida al soltarla. La opción «wrapAround» realiza un desplazamiento infinito, mostrando el primer elemento de la galería después del último y el último elemento antes del primero.

  <figure class="gallery js-flickity" data-flickity-options="{"freeScroll": true, "wrapAround": true}">
    …
  </figure>

  El parámetro de «reproducción automática» avanza automáticamente a la siguiente imagen de la galería. Puede especificar cuánto tiempo desea que se muestre cada imagen. La función de reproducción automática se desactivará cuando la galería se controle manualmente.

  <figure class="gallery js-flickity" data-flickity-options="{"autoPlay": 1500}">
    …
  </figure>

  En el ejemplo anterior, las imágenes cambian cada 1,5 segundos. Si usa varias galerías y desea controlarlas de forma centralizada, deberá integrar jQuery o Vanilla JS.

  $(".gallery").flickity({
    cellAlign: "right",
    contain: true
  });

  En el ejemplo anterior, la clase «gallery» se usa para configurar todas las galerías. Esta es solo una pequeña selección de parámetros que proporciona Flickity. Si desea personalizarlo aún más, puede usar la API de Flickity para crear su propia navegación o agregar elementos dinámicos a la galería y eliminarlos. La API también proporciona un par de eventos para reaccionar ante las interacciones con la galería.

  Conclusión

  Flickity es un marco de galería elaborado. El manejo de las galerías es muy similar al que estamos acostumbrados de las aplicaciones nativas en dispositivos móviles. Así que es bastante intuitivo. No hace falta decir que se ha vuelto más importante ofrecer soluciones tan cómodas para presentar imágenes y cosas similares también para dispositivos móviles. Flickity hace todo eso. Configurar Flickity es muy sencillo. Puede encontrar todos los parámetros bien explicados y con ejemplos en la documentación. Además, hay un texto fuente editable para cada ejemplo en CodePen. Allí puede probar la configuración y editarla. Flickity funciona bien con todos los navegadores actuales, incluidos Internet Explorer 8+, Android browser 2.3+ e iOS 5+. Sin embargo, Flickity solo es gratuito para proyectos de código abierto. Otros proyectos requieren una sola licencia que cuesta $25. Los desarrolladores solo necesitan una licencia y no una para cada sitio web. Por lo tanto, puede usarlo para varios proyectos. También hay una licencia que pueden usar hasta ocho desarrolladores ($110) y otra para un número ilimitado de desarrolladores ($290).

  enlaces relacionados

  • Flickity

  (dpe)