在大型弹出式回调函数中使用数据属性定义猫头鹰轮播

debugcn 发表于 Dev

高密度脂蛋白

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

但是，当我使用data属性定义Owl carousel时，Owl carousel不起作用。

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>

使用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).data('slides');
                var autoplay = $(this).data('autoplay');
                $(this).owlCarousel({
                    items: items,
                    autoplay: autoplay
                });
            });

         }
    }
});

一切正常。如果我使用了没有数据属性的“定义猫头鹰”轮播：

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

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

         }
    }
});

卡利玛

要访问data- *属性，您需要使用.attr()not .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
                });
            });

         }
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。