问题描述
我正在从 firestore 数据库中获取数据以创建产品卡,以便我可以在轮播中显示产品卡。猫头鹰旋转木马要具体。我在 javascript 中使用 innerHTML 属性以编程方式添加产品卡。当我这样做时,猫头鹰轮播似乎不起作用,但是当我在 html 中静态创建卡片时,轮播可以工作。可能是什么问题?
代码:
HTML:
/
/something
Javascript:
<div class="product-area most-popular section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Hot Items</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="owl-carousel popular-slider" id="owlCarousel">
<!--product cards go here-->
</div>
</div>
</div>
</div>
</div>
解决方法
我刚刚遇到了同样的问题。 您应该做的是在添加模板(内部html)后初始化OWL CAROUSEL;
例如:
crypto.randomBytes(32)
这对我有用!希望这可以帮助你:)