Omar Omar - 18 days ago 4
jQuery Question

Initializing SLICK Carousel after jQuery Template loads

My javascript currently looks like this.

// 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();
// });


I tried many variations of this, but i cant get Slick to INIT unless i load static content instead of doing the first function (above).

If i try to load slick after the first function i get
slick is not a function
in the console.

How can i init slick after the first function puts content in the slick div for slick to work with?

Answer

Call startSlick function from inside $.getJSON after the completion of $(entry).each function

$.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();
});

Here's a working JSfiddle

Also, there seems to be some issue in the template in $.getJSON, for now I've wrapped the whole thing inside div, but do inspect the HTML in browser. Same goes for slick-dupe, I mean anchor inside an anchor doesn't make a whole lot of sense.