for school history project, i'm making timeline webpage (live here). avoid having repeatedly type details each, put them in spreadsheet , exported json.
in nav, created links labelled year of event using javascript.
i want use slick.js, jquery plugin, turn nav carousel, demonstrated /slick-test-static.html of live website linked above.
my code:
$(document).ready(function(){ $.getjson("data.js", function(result){ (var = 0; < result.length; i++){ var string = json.stringify(result[i]); var parsed = json.parse(string); $('.slider').append("<li><a href=\"#" + parsed.number + "\">" + parsed.year + "</a></li>"); } }); $('.slider').slick({ slidestoshow: 8, slidestoscroll: 5, autoplay: true, autoplayspeed: 3000 }); }); the links created, slider isn't. made page links created not using json, , worked fine.
i think problem because getjson method asynchronous, browser tries create slider before items added slider. first, is problem? if so, what's best way fix it?
you can't make synchronous. es6 can "fake" waiting on asynchronous actions using async , await it's doing same need make work.
you need stick $('.slider').slick(... code inside of $.getjson callback. should not initialize slider until async callback made.
