Owl Carousel and Magnific Popup

Question

I'm using owl carousel and decided to add the magnific plugin to it to be able to click on an image in the carousel, view it larger, and then have a lightbox gallery to be able to click through the larger images. Lightbox part works, but it seems to be duplicating all the images when clicking through the lightbox. It's also broke my carousel on the actual website and displays all the images.

$(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: [
    "",
    ""
  ]
});

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;
}






  
    Bootleggers Ball
    Information text

Owl Carousel and Magnific Popup

0 Answers