CODEWITHSUNDEEP
javascriptjqueryhtml
Kerst
Kerst

Reputation: 85

Using Jquery load method with Slick plugin

I am trying to create an HTML page (index.html) using loaded divs from a second HTML sheet (b.html). I would like the loaded content to be displayed in a carousel using the Jquery Slick plugin. I'm using the following code to load the content and then put it into a carousel:

In index.html

<div id='includedContent' class='slides'></div>

In the code.js file

$("#includedContent").load("b.html"); 
$('.slides').slick();

The divs appear one after another in the page but not in a carousel. If I include the divs directly in the index HTML file (index.html) and simply call the slick plugin using: $('.slides').slick(); it works fine.

Is 'loaded' content treated in a different way? Very new to JavaScript, all help appreciated.

Upvotes: 2

Views: 1113

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115262

You need to wait to load the content, only after loading content initialize the plugin. So move the code inside success callback function of load(). In your code $('.slides') selector will not get any element , since it's not loaded yet.

$("#includedContent").load("b.html",function(){
   $('.slides').slick();
});

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

Just load the content and call the .slick() loader.

$("#includedContent").load("b.html", function () {
  $('.slides').slick();
});

The .load() takes the second argument to be the function that executes after loading the content. So that .slick(), gets executed on the existing content. You cannot delegate like events, so use the success callback.

Upvotes: 0

Related Questions