Despite seeing similar queries on SO multiple times (such as here), I couldn't find a solution that worked for me.
I am using ajax to import JSON data for a slick slider. The slick slider needs to be initialized after the completion of the ajax import process.
Here's my code:
// Import Ticker
$.ajax({
url: '/de/data/data.json',
type: 'GET',
datatype: 'json'
}).success(function (data) {
for (var i = 0; i < data.length; i++) {
var obj = data[i];
$('section.ticker .slider').append(`
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
`)};
$(document).on('ready', function() {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
// Error handler
}).error(function (err) {
console.log(err);
})
I also attempted the following alternatives:
}).success(function (data) {
for (var i = 0; i < data.length; i++) {
var obj = data[i];
$('section.ticker .slider').append(`
<div class="slide">1</div>
...
`)};
}.complete: function (data) {
$('.slider').slick({
infinite: ...
});
}).error(function (err) {
console.log(err);
})
Or this:
$( document ).ajaxStop(function() {
$('.slider').slick({
infinite: ...
});
});