当 <div> 使用 js 生成时，Flickity 轮播不起作用答案

【问题标题】：Flickity carousel doesn't work when <div> are generated with js当 <div> 使用 js 生成时，Flickity 轮播不起作用
【发布时间】：2023-03-12 21:25:01
【问题描述】：

我找到了一个基于 Flickity 的轮播，你可以在这里查看：

https://codepen.io/atelierbram/pen/LRkAxQ 感谢 atelierbram

现在我想用 JS 生成包含图像，我做了以下代码：

<head>
    <script   src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<link rel="stylesheet" href="flickity.css"></head>
<h1>Image slider with Thumbnails and Flickity - asNavFor</h1>

<div class="container">
<!-- Flickity HTML init -->
<div id="img_c" class="carousel carousel-main" data-flickity='{"pageDots": false }'>
  
</div>

<div id="img_d" class="carousel carousel-nav"
  data-flickity='{ "asNavFor": ".carousel-main", "contain": true, "pageDots": false }'>

</div>

</div><!-- /.container -->


<script>
    var folder = 'img/';
var carousel = 'carousel-cell';
var img_thumb='120px';
    $.ajax({
        url : folder,
        success: function (data) {
            $(data).find('a').attr('href', function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) { 
                    for (var i = 1; i <= 1; i++) {
                       $('<div class='+carousel+' ><img src=' + val + '></div>').appendTo(img_c);
                       $('<div class='+carousel+' ><img src=' + val + ' width='+img_thumb+'></div>').appendTo(img_d);
                       
                    }
                } 
            });
        }
        
    });

    
</script> 

<script>$(document).on('ready', function() {
   document.write('<script type="text/javascript" src="flickity.js">');
});</script>

问题是 Flickity 没有被正确触发，它没有附加任何值

我的代码的输出是

<div id="img_c" class="carousel carousel-main" data-flickity="{&quot;pageDots&quot;: false }">
  
<div class="carousel-cell"><img src="/img/100271519.jpg"></div><div class="carousel-cell"><img src="img/140178627_04.jpg"></div><div class="carousel-cell"><img src="img/200157969.jpg"></div><div class="carousel-cell"><img src="img/200157969_13.jpg"></div></div>

输出应该是这样的：

<div class="container">
<!-- Flickity HTML init -->
<div class="carousel carousel-main flickity-enabled is-draggable" data-flickity="{ &quot;asNavFor&quot;: &quot;.carousel-main&quot;, &quot;contain&quot;: true, &quot;pageDots&quot;: false }" tabindex="0">
    
<div class="flickity-viewport" style="height: 504px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0%;"><img src="//via.placeholder.com/672x504/3391cc/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 101.19%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/3366cc/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 202.38%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/394cc6/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 303.57%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/5946b9/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 404.76%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/8946b9/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 505.95%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/bf409f/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 607.14%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/d92f26/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 708.33%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/d2562d/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 809.52%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/d98026/ffffff"></div><div class="carousel-cell" style="position: absolute; left: 910.71%;" aria-hidden="true"><img src="//via.placeholder.com/672x504/cca633/ffffff"></div></div></div><button class="flickity-button flickity-prev-next-button previous" type="button" disabled="" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button></div>

<div class="carousel carousel-nav flickity-enabled is-draggable" data-flickity="{ &quot;asNavFor&quot;: &quot;.carousel-main&quot;, &quot;contain&quot;: true, &quot;pageDots&quot;: false }" tabindex="0">

谁能帮我得到正确的输出？

谢谢！

【问题讨论】：

标签： javascript html ajax carousel flickity

【解决方案1】：

您需要删除 flickity 数据属性：
他们自动初始化轻弹。由于您异步加载图像（通过 AJAX），因此无法正常工作。因此，你必须等到你的数据被加载并且你的画廊项目被附加到 DOM 中。

<div class="container">
<!-- Flickity HTML init -->
  <div id="img_c" class="carousel carousel-main"></div>
  <div id="img_d" class="carousel carousel-nav"></div>
</div>

直接加载您的脚本（最好在您的 html 正文的底部以减轻渲染阻塞）。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src='https://npmcdn.com/flickity@2/dist/flickity.pkgd.js'></script>
<script>
    var folder = 'img/';
    var carousel = 'carousel-cell';
    var img_thumb='120px';
    $.ajax({
        url : folder,
        success: function (data) {
            $(data).find('a').attr('href', function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) { 
                    for (var i = 1; i <= 1; i++) {
                       $('<div class='+carousel+' ><img src=' + val + '></div>').appendTo(img_c);
                       $('<div class='+carousel+' ><img src=' + val + ' width='+img_thumb+'></div>').appendTo(img_d);
                       
                    }
                } 
            });
            
            /** 
            /* your images are loaded via ajax – 
            /* now you can initialize flickity
            **/
            $('.carousel-main').flickity({
                // options
                pageDots: false,
                contain: true, 
            });
                
            $('.carousel-nav').flickity({
                // options
                asNavFor: ".carousel-main", 
                contain: true, 
                pageDots: false
            });
        }
    });
</script>

您在成功回调的末尾插入您的初始化函数 - 因此在加载所有内容并附加您的画廊项目的 html 之后。

【讨论】：