jquery - Owl Carousel 和壮观的弹出窗口

我使用的是owl carousel，因此决定向其中添加宏伟的插件，以能够单击该轮播中的图像，将其放大查看，然后具有一个灯箱图库，以能够单击较大的图像。灯箱部分可以正常工作，但是在点击灯箱时，它似乎正在复制所有图像。它也破坏了我在实际网站上的轮播，并显示了所有图像。

$(document).ready(function() {
  $(".popup").magnificPopup({
    type: "image",
    removalDelay: 160,
    preloader: false,
    fixedContentPos: true,
    gallery: {
      enabled: true
    }
  });
});
$(".bootleggers").owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ]
});

body {
  background: #f1f1f1;
}


/* image slideshows for events */

.carousel-wrap {
  width: 100%;
}

.bootleggers .item {
  -webkit-backface-visibility: hidden;
  display: inline-block;
}

.item img {
  border-radius: 50%;
}

.owl-nav>div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
  color: #000;
}

.owl-nav .owl-next {
  right: -30px;
  color: #000;
}

.aboutrow {
  display: flex;
}

.aboutcol {
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eventname {
  font-size: 2.25em;
  font-weight: bold;
  color: #8d0700;
}

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<div class="aboutrow">
  <div class="w3-col l4 aboutcol">
    <h4 class="cursive eventname">Bootleggers Ball</h4>
    <p>Information text</p>
  </div>
  <div class="w3-col l8 aboutcol">
    <div class="carousel-wrap">
      <div class="bootleggers owl-carousel">
        <a class="item popup" href="http://via.placeholder.com/250x250"><img src="http://via.placeholder.com/250x250" alt="Bootleggers Ball"></a>
        <a class="item popup" href="http://via.placeholder.com/250x250"><img src="http://via.placeholder.com/250x250" alt="Bootleggers Ball"></a>
        <a class="item popup" href="http://via.placeholder.com/250x250"><img src="http://via.placeholder.com/250x250" alt="Bootleggers Ball"></a>
        <a class="item popup" href="http://via.placeholder.com/250x250"><img src="http://via.placeholder.com/250x250" alt="Bootleggers Ball"></a>
        <a class="item popup" href="http://via.placeholder.com/250x250"><img src="http://via.placeholder.com/250x250" alt="Bootleggers Ball"></a>

      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

最佳答案

首先：您的owlCarousel对象在文档DOM函数之外。

关于jquery - Owl Carousel 和壮观的弹出窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47417291/