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转换为INIT。

如果我尝试在第一个功能之后加载光滑，我在控制台中获得slick is not a function。

在第一个函数将内容放入光滑的div中以便使用光滑的内容后，我如何初始化？

Answer 1

startSlick功能完成后，在$.getJSON内调用$(entry).each功能

$.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，我的意思是锚定在一个锚点内并没有多大意义。

加载jQuery模板后初始化SLICK Carousel

1 个答案: