Jump to content

[SOLVED] Error integrating Slick slider


mike62
 Share

Recommended Posts

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 by mike62
Marking as solved.
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...