在 magnific popup 回调函数中使用 data 属性定义 owl carousel

Question

我在 Magnific Popup 中实现了 Owl 轮播。而且，它通常工作正常。如果，我使用了简单的函数 $('.owl-carousel').owlCarousel({autoplay:true, items:1})

但是，当我使用数据属性定义 Owl 轮播时，Owl 轮播不起作用。

HTML:

<a class="ajax-popup btn btn-dark" href="ajaxproject.html">Click To Open Popup</a>

ajaxproject.html 文件:

<div class="container ajax-container">
  <h2 class="text-7 text-center mb-4">Title 1</h2>
  <div class="row">
    <div class="col-sm-7">
      <div class="owl-carousel owl-theme" data-autoplay="true" data-items="1">
        <div class="item"> <img class="img-fluid" alt="" src="images/bg/image-6.jpg"> </div>
        <div class="item"> <img class="img-fluid" alt="" src="images/bg/image-5.jpg"> </div>
      </div>
    </div>
    <div class="col-sm-5">
      <h4 class="text-4 font-weight-600">Description:</h4>
      <p>Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</p>
    </div>
  </div>
</div>

使用数据属性定义 owl 轮播： 但是，这不起作用。这里有什么问题？

$(".ajax-popup").magnificPopup({
    type: "ajax",
    mainClass: "mfp-fade",
    closeBtnInside: true,
    gallery: {
      enabled: true,
    },
    callbacks: {
        ajaxContentAdded: function() {

            $(".owl-carousel").each(function (index) {
                var items = $(this).data('slides');
                var autoplay = $(this).data('autoplay');
                $(this).owlCarousel({
                    items: items,
                    autoplay: autoplay
                });
            });

         }
    }
});

工作正常。如果我使用没有数据属性的 Define owl 轮播：

$(".ajax-popup").magnificPopup({
    type: "ajax",
    mainClass: "mfp-fade",
    closeBtnInside: true,
    gallery: {
      enabled: true,
    },
    callbacks: {
        ajaxContentAdded: function() {

           $('.owl-carousel').owlCarousel({
               autoplay:true,
               items:1
           })

         }
    }
});

Answer 1

要访问 data-* 属性，您需要使用 .attr() 而不是 .data()。您的代码应该是：

$(".ajax-popup").magnificPopup({
    type: "ajax",
    mainClass: "mfp-fade",
    closeBtnInside: true,
    gallery: {
      enabled: true,
    },
    callbacks: {
        ajaxContentAdded: function() {

            $(".owl-carousel").each(function (index) {
                var items = $(this).attr('data-items');
                var autoplay = $(this).attr('data-autoplay');
                $(this).owlCarousel({
                    items: items,
                    autoplay: autoplay
                });
            });

         }
    }
});

在 magnific popup 回调函数中使用 data 属性定义 owl carousel

Define owl carousel with data attribute in magnific popup callbacks function

html

javascript

jquery

magnific-popup

owl-carousel-2