Question

点击后加载图像div，但项目不会变成猫头鹰旋转木马。我的代码出了什么问题？这是Jsfiddle

点击：

<a href="#modal-work01" data-toggle="modal" data-qty="10" data-srs="work02-">

div项目已加载：

<div id="owl-work-modal01" class="owl-carousel">

我的脚本：

<script type="text/javascript">
    $('.thumb a').on('click',function()
    {
        $('#owl-work-modal01').empty();
        let qty = $(this).data('qty');
        let srs = $(this).attr('data-srs');
        for (var i = 0; i < qty; i++) {
        $('#owl-work-modal01').append('<div class="item"><figure><img src="images/'+srs+i+'.jpg" alt=""></figure></div>');
        }
        $(".owl-carousel").owlCarousel();
    });
    </script>

Answer 1

在添加新图片并初始化之前，您需要destroy owlCarousel：

  $("#owl-example").data('owlCarousel').destroy()

检查以下代码段：

$(document).ready(function() {

    $("#owl-example").owlCarousel({
        autoPlay: 1000,
        margine: 10,
        slideSpeed: 200,
        paginationSpeed: 600,
        rewindSpeed: 800,
        stopOnHover: true,
        navigation: true,
        pagination: true,
        singleItem: true,
        autoHeight: true,
    });

    $('#clickMe').on('click', function() {
        $("#owl-example").data('owlCarousel').destroy()
        $('#owl-example').empty();
        //name of images and quantity
        let qty = 5;
        //append images to modal
        for (var i = 0; i < qty; i++) {
            $('#owl-example').append('<div class="item"><figure><img src="http://rubinmuseum.org/images/content/nepal_artworks2_500.jpg" alt=""></figure></div>');
        }
        $("#owl-example").owlCarousel({
            autoPlay: 1000,
            margine: 10,
            slideSpeed: 200,
            paginationSpeed: 600,
            rewindSpeed: 800,
            stopOnHover: true,
            navigation: true,
            pagination: true,
            singleItem: true,
            autoHeight: true,
        });
    });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<a id="clickMe" style="cursor: pointer">click here to see the issue</a>
<div id="owl-example" class="owl-carousel">
  <div class="item">
    <figure>
      <img src="https://www.artmajeur.com/medias/home/a/d/administrator/home/num_9307189.jpg" alt="">
    </figure>
  </div>
  <div class="item">
    <figure>
      <img src="https://www.artmajeur.com/medias/home/a/d/administrator/home/num_9307189.jpg" alt="">
    </figure>
  </div>
  <div class="item">
    <figure>
     <img src="https://www.artmajeur.com/medias/home/a/d/administrator/home/num_9307189.jpg" alt="">
    </figure>
  </div>
</div>

动态加载的项目没有转向模态中的猫头鹰轮播

1 个答案: