Question

我有一个正常工作的API调用，可正确返回图像，并且代码适用于光滑的轮播，如果图像硬编码到我的HTML中，则可以使用。但是，当我将两者合并时，我的图像会正确地动态填充div，但旋转木马不会渲染。

我已经为此工作了12个小时而且很困惑。本周末必须完成一项关键项目。任何帮助将不胜感激。

以下是我的代码。请注意，我将图像硬编码并注释掉以供参考。

光滑文件

您可以从http://kenwheeler.github.io/slick/获取slick.css，slick-theme.css和slick.js，因为slick.js库太大而无法插入此帖子。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>
<body>

   <section class="slider-for slider">
  <!-- Images Commented Out
 <div>
      <img src="http://target.scene7.com/is/image/Target/14263758">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt02">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt03">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt04">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt05">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt06">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt07">
    </div>-->
  </section>

  <section class="slider-nav slider">
    <!--Images Commented Out
<div>
      <img src="http://target.scene7.com/is/image/Target/14263758">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt02">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt03">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt04">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt05">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt06">
    </div>
    <div>
      <img src="http://target.scene7.com/is/image/Target/14263758_Alt07">
    </div>-->
  </section>



  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="model-controller.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {

      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
      });
      $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        centerMode: true,
        focusOnSelect: true
      });

    });
  </script>

</body>
</html>

模型controller.js

$.getJSON("item-data.json", function(results) {
        $.each(results.CatalogEntryView, function(index, item) {
   //////////////used to verify tree structure while building indexes////////////////
            console.dir(item.Images[0].PrimaryImage[0].image);
        });

/////////////Builds Slideshow Array and Appends to div tags///////////////////////////
     var slideShowArray = results.CatalogEntryView.map(item => item.Images.map(imgs =>[imgs.PrimaryImage[0].image, ...imgs.AlternateImages.map(alt => alt.image)]))[0][0];
        $.each(slideShowArray, function(k, v){
            var slidesBig = "<div><img src='" + v + "'></div>";
            var slidesSmall = "<div><img src='" + v + "'></div>";
            $(".slider-for").append(slidesBig);
            $(".slider-nav").append(slidesSmall);
        });

});

项-data.json

我大幅缩减了这一点，只包括相关数据。收缩后应该是正确的语法，但如果没有，请随时编辑：

{
 "CatalogEntryView": [
  {
   "Images": [
    {
     "AlternateImages": [
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt01"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt02"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt03"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt04"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt05"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt06"
      },
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758_Alt07"
      }
     ],
     "PrimaryImage": [
      {
       "image": "http:\/\/target.scene7.com\/is\/image\/Target\/14263758"
      }
     ],

     "imageCount": "8",
     "source": "internal"
    }
   ]
  }
 ]
}

它现在正在做什么

Answer 1

使用slickAdd而不是append：

$(".slider-for").slick("slickAdd", slidesBig);
$(".slider-nav").slick("slickAdd", slidesSmall);

而不是：

$(".slider-for").append(slidesBig);
$(".slider-nav").append(slidesSmall);

为什么slickAdd因为在添加项.append之前仍然需要调用JS魔术需要调用它们。

refer to slicks documentation of slickAdd

希望有所帮助

Answer 2

您在获取数据之前初始化了光滑！所以光滑创建它的容器，你在光滑容器外面添加图像！我从来没有使用光滑，但它应该是问题！我会解决它并编辑这个答案！

修复了model-controller.js

function getData() {
    $.getJSON("item-data.json", function(results) {
        var slideShowArray = results.CatalogEntryView.map(item => item.Images.map(imgs =>[imgs.PrimaryImage[0].image, ...imgs.AlternateImages.map(alt => alt.image)]))[0][0];
        $.each(slideShowArray, function(k, v){
            var slidesBig = "<div><img src='" + v + "'></div>";
            var slidesSmall = "<div><img src='" + v + "'></div>";
            $(".slider-for").slick("slickAdd", slidesBig);
            $(".slider-nav").slick("slickAdd", slidesSmall);
        });

    });
}

初始化光滑后立即调用getData（）函数！

光滑轮播在插入图像但不支持API调用时有效

2 个答案:

修复了model-controller.js