Owl Carousel 2 和 Featherlight.js – mouseDrag 导致灯箱打开

Question

在我正在使用的项目中 Owl Carousel in combination with featherlight。在 Owl Carousel it 中，您可以激活“mouseDrag”，这样您就可以用鼠标拖动旋转木马。这很好用！此外，当我在幻灯片中有真正的超链接时，它在拖动时不会打开它们。

但是使用 featherlight 就不一样了。如果我在幻灯片中有 featherlight-links，它会在我拖动轮播时打开它们 。为什么会这样？我能以某种方式纠正这种行为吗？

我做了一个演示问题的代码示例： （请拖动两个轮播）

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

拖动轮播时会打开灯箱：

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

但是幻灯片中的普通链接不会发生这种情况：

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

我该如何解决这个问题？

Answer 1

您可以利用 changed.owl.carousel 事件在全局变量 (followFeatherlightlink 在下面的代码中）。为此，您需要防止自动绑定具有属性 data-featherlight 的元素。您可以通过多种方式做到这一点，我只是消除了该属性。理论上，您也可以在加载 DOM 之前将 $.featherlight.autoBind 设置为 false，但我没有尝试过。我正在显示下面的代码，但它似乎无法正常工作。但是，它适用于 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>

Owl Carousel 2 和 Featherlight.js – mouseDrag 导致灯箱打开

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

javascript

jquery

owl-carousel

featherlight.js