Tengo un slider de imágenes que es arrastrable. Estas imágenes tienen implementada la biblioteca Lity
, la cual se utiliza para abrir un lightbox cuando el usuario hace clic en cada imagen.
El problema es que no puedo arrastrar las imágenes para navegar por el slider porque Lity
se activa cada vez que suelto el clic después de arrastrar las imágenes.
Me gustaría saber si hay alguna manera de evitar eso. Necesito que Lity
se active solo cuando hago clic en la imagen, pero no cuando la arrastro.
Esta es la biblioteca JavaScript Lity a la que me refiero.
También dejé este issue en Github para ver si alguien puede ayudarme allí.
¡Gracias!
Este es el código que tengo. Pero aquí no hay nada muy relevante. Solo un foreach
para imprimir las imágenes y el atributo data-lity
en cada una, que es lo que activa el lightbox.
<div class="small-slider__slider">
<?php
foreach ( $args['screenshots'] as $screenshot ) : ?>
<article class="small-slider__item">
<div class="post__image">
<?php if ( ! empty( $src_low_res ) || ! empty( $src_high_res ) ) : ?>
<a data-lity href="<?php echo esc_url( $src_high_res ); ?>">
<img loading="lazy" src="<?php echo esc_url( $src_low_res ); ?>" alt="<?php echo esc_attr( $alt ); ?>">
</a>
<?php endif; ?>
</div>
</article>
<?php
endforeach;
?>
</div>
Nota: la biblioteca de JavaScript Lity funciona bien, excepto por el problema descrito, y la biblioteca de JavaScript del slider (que se llama Flickity) también me funciona bien, la funcionalidad de arrastrar funciona perfectamente. Y no tengo errores en la consola.
Si algo no está claro, por favor déjame un comentario con tu pregunta.
¡Gracias!