How can I run a jQuery function only when it’s needed?

I’ve run into a problem where I have a responsive slider running on my site which has been added to an external .js file. I am running into an issue with a modal not popping up on the homepage because the page is looking for the slider which is only included on a couple of sub pages.

Chrome console is showing the following error: Uncaught TypeError: undefined is not a function

Here is my current code:

$('.my-carousel').slick({
    speed: 330,
    slidesToShow: 4,
});

Answer

You can check if plugin has been loaded like this (it checks if given jQuery function exists):

if ($().slick) {
 // .. your code
}

or

if ($.fn.slick) {
 // .. your code
}