Owl Carousel 2 и Featherlight. js - mouseDrag вызывает открытие лайтбокса - PullRequest
Новая
       230

Owl Carousel 2 и Featherlight. js - mouseDrag вызывает открытие лайтбокса

3 голосов
/ 07 августа 2020

В проекте я использую Owl Carousel в сочетании с Penlight . В Owl Carousel у вас есть возможность активировать "mouseDrag", чтобы вы могли перетаскивать карусель с помощью мыши. Это прекрасно работает! Кроме того, когда у меня есть настоящие гиперссылки внутри слайда, он не открывает их при перетаскивании.

Но с подсветкой все по-другому. Если у меня есть перышки-ссылки внутри слайда, он откроет их, когда я перетащу карусель . Почему это так? Могу ли я как-то исправить это поведение?

Я сделал пример кода, демонстрирующий проблему: (перетащите две карусели)

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>

Как я могу исправить это?

1 Ответ

1 голос
/ 07 августа 2020

Вы можете воспользоваться событием changed.owl.carousel, чтобы предотвратить срабатывание ссылки, используя beforeOpen в featherlight с помощью глобальной переменной (followFeatherlightlink в приведенном ниже коде). Для этого нужно запретить автоматическую привязку c элементов с атрибутом data-featherlight. Сделать это можно несколькими способами, я просто убрал атрибут. Теоретически вы также можете установить $.featherlight.autoBind на false до загрузки DOM, но я не пробовал. Я показываю код ниже, но он не работает должным образом. Однако он работает на 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>
...