Owl Carousel 2 and Featherlight.js – mouseDrag causes opening of the lightbox

Question

In a project I am using Owl Carousel in combination with featherlight. In Owl Carousel it you have the possibility to activate "mouseDrag" so you can drag the carousel with your mouse. This works fine! Also when I have real hyperlinks inside a slide it does not open them when dragging.

But with featherlight it is different. If I have featherlight-links inside a slide it will open them when I drag the carousel. Why is it like this? Can I somehow correct this behavior?

I made a code example which demonstrates the problem: (please drag the two carousels)

https://codepen.io/xj6652/pen/OJNPOqj

While dragging the carousel it will open the lightbox:

<div class="owl-carousel featherlightlinks">
  <div> 
    <a href="#" data-featherlight="#content" class="blocklink"></a>
  </div>
  …
</div>

But with normal links inside a slide this does not happen:

<div class="owl-carousel reallinks">
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  …
</div>

How can I fix this?

Answer 1

You can take advantage of the changed.owl.carousel event to prevent the triggering of the link using beforeOpen in featherlight with the help of a global variable (followFeatherlightlink in the code below). To do this, you need to prevent the automatic binding of elements with the attribute data-featherlight. You can do it in several ways, I just eliminated the attribute. In theory, you might also set $.featherlight.autoBind to false before the DOM loads, but I have not tried. I am showing the code below, but it does not seem to work properly. However, it works on codepen

let followFeatherlightlink = true;
$(".owl-carousel").owlCarousel({
  margin:10,
  loop:true,
  dots: false,
  nav: false,
  items: 3
});
$(".owl-carousel").on('changed.owl.carousel', function(event) {
  followFeatherlightlink = false;
});
$(document).ready(function(){
   $('.featherlightlinks .blocklink').featherlight('#content', {
  beforeOpen: function(event){
  let result = followFeatherlightlink;
  followFeatherlightlink = true;
    return result; 
}
});
});

* {
  box-sizing: border-box;
}

.owl-carousel {
  position: relative;
  width: 100%;
}

.owl-carousel div{
  position: relative;
}

.owl-item {
  background-color: #D2527F;
  color: white;
  text-align: center;
  height: 200px;
  width: 200px;
}

a.blocklink{
  color: red;
  background: blue;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200px;
  display: block;
}

.reallinks a.blocklink{
  background: green;
}

.hidden{
  display: none;
}

h2:nth-of-type(2){
  margin-top: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>
<h2>Problem: Dragging causes open lightbox</h2>
<div class="owl-carousel featherlightlinks">
  <div> 
    <a href="#" class="blocklink"></a>
  </div>
  <div> 
    <a href="#"  class="blocklink"></a>
  </div>
  <div> 
    <a href="#"  class="blocklink"></a>
  </div>
  <div> 
    <a href="#"  class="blocklink"></a>
  </div>
</div>


<div class="hidden">
  <div id="content">My Lightbox Content</div>
</div>


<h2>With real links it is working</h2>
<div class="owl-carousel reallinks">
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
  <div> 
    <a href="http://codepen.io" class="blocklink"></a>
  </div>
</div>