It's not possible to drag elements without Lity being launched

[adrianahdez]

I have a draggable slider of images. These images have Lity implemented. 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.

I also posted the question at this link (StackOverflow) with a bit more context.

Thank you!

[adrianahdez]

After giving it a lot of thought and trying many things, I found a solution using the Flickity events (which is the library I used for the slider).

• From my HTML, I only removed the data-lity attribute so it wouldn't trigger by default.

• To the image, I added a new attribute called data-high-res to store the URL that will open when the Lity is triggered.

  <img data-high-res="<?php echo esc_url( $src_high_res ); ?>" loading="lazy" src="<?php echo esc_url( $src_low_res ); ?>" alt="<?php echo esc_attr( $alt ); ?>">

Since I can't use the typical click event because it will also trigger when dragging, I did it with the help of events from the library I use to create the slider.

This library is called Flickity, and I realized it has its own event called staticClick that responds to a static click, meaning without movement.

So, I attach to the staticClick event and manually trigger Lity at that moment, resulting in the JavaScript code like this:

smallSliderElem.forEach(element => {
const flick = new Flickity(element, smallSliderOptions);

flick.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  if('undefined' === typeof event.target.dataset.highRes) {
    return;
  }
  Lity(event.target.dataset.highRes);
  });

  });

Since everything is in a foreach loop that can create many sliders, I ensure that Lity is only launched on sliders that have the data-high-res attribute.

I hope this helps people who are using Lity and Flickity together and have encountered the same issue.

But anyway, I believe it would be good for Lity to have this implemented already, so we wouldn't have to depend on other libraries to do it.