fupuchu fupuchu - 23 days ago 11
HTML Question

Loading HTML from link & write into div with slick.js library

I have a rather odd issue with the slider and loading a chunk of HTML inside.

Currently I have a chunk of html text from an external source which I am trying to load into a with slick.js targetted at it.

This is how the JS looks like:

$( document ).ready(function(){
$.get("http://htmlchunk.com", function( images ) {
document.getElementById("slider").innerHTML = images;
});
});
$('.carousel').slick({
initialSlide: 0,
lazyLoad: 'progressive',
autoplay: true,
arrows: false,
});


And my HTML only has:

<div class="css" id="slider">
</div>


When I run it, it displays all the images at once and slick.js doesn't interact with the html inserted. How do I change it in such a way that slick.js can interact with it?

Answer

I found the problem and the solution was to use .addClass() here's the code

$('#canvas').load('test.html', function(){
  console.log("html loaded");
  $('#canvas').addClass("carousel");
  $('.carousel').slick({
    initialSlide: 0,
    lazyLoad: 'onDemand',
    autoplay: true,
    arrows: false,
  });
});