Carousel不工作，如果代码是由jQuery动态添加

Question

我的网站上有一个旋转木马，它在硬编码上工作得很好。代码是这样的:

<div class="w-full flex justify-center">
<div class="gallery js-flickity"
data-flickity-options='{ "wrapAround": true }'
>
<div class="gallery-cell">
<div class="w-full flex justify-center">
<img src="./img/sidenav-1/clients-01.png" class="client-image"/>
</div>
</div>
<div class="gallery-cell">
<div class="w-full flex justify-center">
<img src="./img/sidenav-1/clients-02.jpeg" class="client-image" />
</div>
</div>                  
</div>

由于某些编码限制，我不得不使用这个旋转木马，所以我不能改变它。现在我必须将此网页连接到管理面板，其中我使用PHP从数据库中获取值，并响应相同的整个代码，并使用jQuery将其放置到位。但如果我这样做，而不是旋转木马图像显示在另一个下面。

jQuery代码:

<script>
$.ajax({url: "API/clients.php", success: function(result){
$("#append_clients").html(result);
}});
</script>

PHP:

$resultee = '<div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true }'>';
$sql = "SELECT * FROM Clients;";
$result = $conn->query($sql);
$conn->close();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$image_path = $row["image_address"];
$client_name = $row["client_name"];
$client_desc = $row["client_desc"];
$resultee .= '<div class="gallery-cell"><div class="w-full flex justify-center"><img src="'.$image_path.'" class="client-image" /></div></div>';
}
} 
$resultee .= '</div>';

CSS和JS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" />
<style>
.gallery {
width: 93vw;
background: #e5e5e5;
margin-left: -5%;
}
.gallery-cell {
width: 93vw;
margin-right: 10px;
}


</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"><script>

谁能帮帮我，我不知道该怎么办

Answer 1

我在动态加载的旋转木马中遇到了类似的问题，其中所有单元格最初都堆叠在彼此的顶部。它可能是两件事:你只是添加元素到html，而不是使用灵活的'append'添加项目到初始化的轮播。其次，如果你调用'resize'后，在一个可见的和填充的旋转木马，它应该能够测量和正确定位元素。

/* init carousel via jquery */
var $carousel = $('.gallery').flickity( { "wrapAround": true } );
/* add item(s) to $carousel */
$carousel.flickity( 'append', your_item);
/* force a redraw */
$carousel.flickity('resize');

API参考:https://www.tszshan.org/home/new/common/js/flickity-docs/api.html调整