I have a draggable slider of images. These images have Lity library implemented which is used to open a lightbox when the user click on every image.
The problem is that I’m unable to drag the images to navigate through the slides because Lity triggers every time I release the click after draggin images.
I would like to know if there is a way to avoid that. I need Lity to trigger only when I click the image, but not when I drag it.
This is the javascript library I refer.
I also left this issue on Github to see if someone can help me there.
Thank you!
This is what I have. But nothing much relevant here. Only a foreach to print the images and the data-lity attribute on each one.
<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 $src_high_res; ?>">
<img loading="lazy" src="<?php echo $src_low_res; ?>" alt="<?php echo $alt; ?>">
</a>
<?php endif; ?>
</div>
</article>
<?php
endforeach;
?>
</div>
Note: the Lity js library is working ok, except for the described problem and the slider js library is also working well, the dragging functionality works perfect. And I don’t have console erros.
If something is not clear, please leave me a comment with your question.
Thanks!!