时间戳

首页 > 解决方案 > Slick 不适用于动态创建的多个 div 元素

javascript - Slick 不适用于动态创建的多个 div 元素

问题描述

我正在使用光滑的滑块来滑动 div。我的 div 元素是在 for 循环内动态创建的，但它不起作用。我还包括以下所需的 4 个文件：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"><

以下是我创建动态 div 的功能。

 function populateDataForMainPageSlide(data) {

  var numTimes = data.length;

  if (numTimes === 0) {
    var removeSlider = document.getElementById("sliderMainPage");
    removeSlider.style.display = "none";
    var removeHeading = document.getElementById("errorDivBlock");
    removeHeading.style.display = "block";
  } else {
    for (var i = 0; i < numTimes; i++) {
     if(data[i].shopInfo==null || data[i].shopInfo==undefined){
            continue;
          }
          var parent = document.getElementById("mainPageMask");
          var newVendorSlide = document.createElement("div");

          var funcString = "storeElementClickedLocalStorageVendor('" + data[i]._id + "');";
          var ref = document.createElement("a");
          ref.setAttribute("href", "vendorstore.html");
          ref.setAttribute("class", "w-inline-block");
          ref.setAttribute("onclick", funcString);
          newVendorSlide.setAttribute("style","height:300px;width:250px;border:1px solid ref;float:left")
          newVendorSlide.appendChild(ref);
          var header4 = document.createElement("h4");
          header4.setAttribute("class", "heading-52");
          header4.innerHTML = data[i].shopInfo.name;
          newVendorSlide.appendChild(header4);
          var bio = document.createElement("p");
          bio.innerHTML = data[i].shopInfo.description;
          newVendorSlide.appendChild(bio);

          parent.appendChild(newVendorSlide);
    }
  } 
}

谁能帮我解决这个问题？任何帮助，将不胜感激。

标签： javascriptslick.js

解决方案

你的问题不清楚，所以我不知道为什么它不起作用。但请注意，您必须在 div 成功呈现后调用 slick 方法。如果您尝试在网页上重新显示 div 之前调用 slick，那么它将无法正常工作。

谢谢。

推荐阅读