光滑无法在动态创建的多个div元素上使用

Question

我正在使用光滑的滑块滑动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);
    }
  } 
}

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

Answer 1

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

谢谢。