Jump to content

[SOLVED] Error integrating Slick slider

mike62

By mike62
in Dev Talk

 Share

Recommended Posts

mike62 Jr. Member

mike62

Posted
Posted (edited)

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.
AndZyk Hero Member

AndZyk

Posted
Posted

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
dragan Hero Member

dragan

Posted
Posted

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

  • Like 1
mike62 Jr. Member

mike62

Posted
  • Author
Posted

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 Hero Member

AndZyk

Posted
Posted

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
mike62 Jr. Member

mike62

Posted
  • Author
Posted

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!!

  • Like 2
 Share
Go to topic listing
×
×
  • Create New...