javascript - 在加载 jQuery 模板后初始化 SLICK Carousel

Question

我的 javascript 目前看起来像这样。

// Get Content from json and load content
$.getJSON('https://spreadsheets.google.com/feeds/list/1osFvdNT94uQ4Hgyhz_LSE2vVZ4FX0KWGvhNJIHGTPjw/od6/public/values?alt=json', function (data) {
  var recent_posts = [];
  var entry = data.feed.entry;
  var item1 = 1;
  $(entry).each(function(){
      var itemID = item1++;
      var name = this.gsx$name.$t;
      var snip = this.gsx$snip.$t;
      var url = this.gsx$url.$t;
      var template = "<a href\""+url+"\" class=\"slick-dupe\"> <a href=\"#\" class=\"db clearfix\"> <div class=\"col-xs-2\"><div class=\"animate number\">"+itemID+"</div></div> <div class=\"col-xs-10\"> <h3 class=\"m0\">"+name+"</h3> <p>"+snip+"</p> </div> </a> </div>"
    $("#animatedHeading").append(template);
  });
});


// slick init
// $(document).ready(function() {
  function startSlick() {  
    var titleMain  = $("#animatedHeading");
    var titleSubs  = titleMain.find("slick-active");
    if (titleMain.length) {
      titleMain.slick({
          autoplay: false,
          arrows: false,
          dots: false,
          slidesToShow: 3,
          centerPadding: "10px",
          draggable: false,
          infinite: true,
          pauseOnHover: false,
          swipe: false,
          touchMove: false,
          vertical: true,
          speed: 1000,
          autoplaySpeed: 2000,
          useTransform: true,
          cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
          adaptiveHeight: true,
        });

        // On init
        $(".slick-dupe").each(function(index, el) {
          $("#animatedHeading").slick('slickAdd', "<div>" + el.innerHTML + "</div>");
        });

        // Manually refresh positioning of slick
        titleMain.slick('slickPlay');
        console.log('init');
    };  
  }
  // setTimeout(startSlick, 100);
  startSlick();
// });

我尝试了很多变体，但我无法让 Slick 启动，除非我加载静态内容而不是执行第一个功能(上面)。

如果我尝试在第一个函数之后加载 slick，我会在控制台中得到 slick is not a function。

在第一个函数将内容放入 slick div 以供 slick 使用后，我如何初始化 slick？

Answer 1

$(entry).each 函数完成后，从 $.getJSON 内部调用 startSlick 函数

$.getJSON('https://spreadsheets.google.com/feeds/list/1osFvdNT94uQ4Hgyhz_LSE2vVZ4FX0KWGvhNJIHGTPjw/od6/public/values?alt=json', function (data) {
  var recent_posts = [];
  var entry = data.feed.entry;
  var item1 = 1;
  $(entry).each(function(){
      var itemID = item1++;
      var name = this.gsx$name.$t;
      var snip = this.gsx$snip.$t;
      var url = this.gsx$url.$t;
      var template = "<div><a href=\""+url+"\" class=\"slick-dupe\"> <a href=\"#\" class=\"db clearfix\"> <div class=\"col-xs-2\"><div class=\"animate number\">"+itemID+"</div></div> <div class=\"col-xs-10\"> <h3 class=\"m0\">"+name+"</h3> <p>"+snip+"</p> </div> </a></div>"
    $("#animatedHeading").append(template);
  });

  // *********** Call here ***********
  startSlick();
});

这是一个 working JSfiddle

此外，$.getJSON 中的模板似乎存在一些问题，目前我已将整个内容包装在 div 中，但请检查 HTML在浏览器中。 slick-dupe 也是如此，我的意思是 anchor 内 anchor 没有多大意义。