[SOLVED] Error integrating Slick slider

[mike62]

I've implemented Slick sliders on WordPress sites many times, but I've never had this error before.

The site is here.

The template code I'm using is:

<link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/>
<script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script>

	<?php // if (count($page->home_header_image) > 0): ?>
		<div class="home-featured-image slick-carousel">
		<?php foreach($page->home_header_image as $image): ?>
			<div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div>
		<?php endforeach ?>
		</div>
	<?php // endif ?>

<script>
(function($) {
	$('.slick-carousel').slick();
})( jQuery );
</script>	

The JS error I'm getting is:

TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined)

As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. 

What am I missing?

 

Edited November 2, 2017 by mike62
Marking as solved.

[AndZyk]

Hello @mike62,

I haven't used Slick yet, but on the website it says:

Quote

Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)

You are using jQuery 1.2.6. So maybe you should try an newer version of jQuery, because 1.2.6 is really old.

Regards, Andreas

[dragan]

yeah, first load jQuery, then slick.js, and at the end init your slider; also, you should wrap it in a document.ready function.

[mike62]

Thanks @AndZyk and @dragan. I've updated jQuery to 1.11.1, and the code to be:

<link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/>
<script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script>

<?php // if (count($page->home_header_image) > 0): ?>
	<div class="home-featured-image slick-carousel">
	<?php foreach($page->home_header_image as $image): ?>
		<div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div>
	<?php endforeach ?>
	</div>
<?php // endif ?>

<script>
jQuery(document).ready(function() {
	jQuery('.slick-carousel').slick();
})
</script>

Now it's telling me that slick is not a function! 

TypeError: jQuery('.slick-carousel').slick is not a function. (In 'jQuery('.slick-carousel').slick()', 'jQuery('.slick-carousel').slick' is undefined)

Seems weird to me, because the slick.js file is definitely being loaded... :S

[AndZyk]

As mentioned in the documentation of Slick, you need to add your scripts (jQuery and Slick) at the end of your closing body tag:

Quote

Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)

Right now you add your scripts before. Usually it shouldn't matter, but it seems to be in this case.

[mike62]

You're right, @AndZyk. I tried putting it after the relevant slider code, figuring that would be enough, but when I dropped it right down to the end, it started working. Thanks!!