Question

我试图为我的项目使用轮播缩略图，但是这些项目是由另一个脚本生成的，我试图加载旋转木马的插件，但他无法识别这些项目。

我的真实HTML：

<div class="prerecord_main">
   <div id="merch">
   </div>
</div>

以前脚本编写后：

<div class="prerecord_main">
   <div id="merch">
    <div class="product-container"></div>
    <div class="product-container"></div>
    <div class="product-container"></div>
    <div class="product-container"></div>
    <div class="product-container"></div>
   </div>
</div>

我的jQuery插件

$(document).ready(function(){
    $('.prerecord_main #merch').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 5,
      touchMove: false,
      slidesToScroll: 1
    });
});

不起作用，因为它无法读取＆＃34; product-container＆＃34;

Answer 1

您应该在添加product-container元素后运行此代码。产品容器元素尚未在文档准备就绪时可用。

$('.prerecord_main #merch').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 5,
  touchMove: false,
  slidesToScroll: 1
});

如果使用chrome，则可以打开开发人员工具（F12）。然后打开控制台并将上面的代码复制到命令行上，然后按Enter键。你现在应该看到一个正常工作的旋转木马。

插件轮播不适用于附加加载的项目

1 个答案: