mike62

[SOLVED] Error integrating Slick slider

By mike62, in Dev Talk

Recommended Posts

mike62    8

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

Share this post

Link to post
Share on other sites

AndZyk    609

AndZyk
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

Share this post

Link to post
Share on other sites

dragan    1,013

dragan
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

Share this post

Link to post
Share on other sites

mike62    8

mike62
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

Share this post

Link to post
Share on other sites

AndZyk    609

AndZyk
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

Share this post

Link to post
Share on other sites

mike62    8

mike62
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 this post

Link to post
Share on other sites
Go To Topic Listing Dev Talk

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • robig
      Show javascript PageList in Page when logged in
      By robig
      Hi 
      I'm currently developing a website for a photographer and the most of the editing needs I#m using FrontEndEditLightbox.
      https://github.com/rolandtoth/FrontEndEditLightbox
      So far so good.
      Now I also want to show the PageList sliding in from the side, like when clicking on the little tree in the admin area.
      How can I achieve this? I've already seen the xhr - request that is done when clicking and have implemented a javascript doing the same request and parsing that json.
      But i'm wondering if that is the right way to go?
       
      Thanks.
      robig
    • awebcreature
      Field with dynamic (realtime) percent calculation with values from other fields
      By awebcreature
      Hello there
      I need a field with realtime percent calculation (without page save)  with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! 
      Thanks in advance! 
       
    • FrancisChung
      The Cost of Javascript
      By FrancisChung
      Long but well written, detailed and informative article written by an Engineering Manager for Google Chrome about the true cost of Javascript and what you can do to alleviate some of that cost.
      Must read!

      https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
    • Sabrina
      Adding a javascript to the website
      By Sabrina
      Hi,  
      I would like to start tracking my website visitors with Leady software. Searched the forum for similar discussion yet did not find the right answer. Could you please tell me how can I add their javascript to my website? Is there any step by step guide available?
      Any help appreciated. 
    • louisstephens
      Writing options (from page) to new JS file
      By louisstephens
      So I have a fairly unusual project, and I am still trying to wrap my head around it (so excuse me if this doesnt make much sense). A user will create parent page (in the backend) with a modal (piece of cake), but then have a custom js file for each parent page. I wouldn't have an issue with creating a new file everytime, but this instance calls for it pretty much to be an automated process as the users are not tech savy.
      I was thinking that I could create the template for the modal (which will be iframed elsewhere), and using an approach found here, automatically create a "js" child page that I could then somehow output to a custom js file.
      I guess I have several questions regarding this since the modal is iframed in:
      1. Since the init script for the modal has to be outside of the iframe (and placed elsewhere), what is the best way to render the custom script (which will be generated from options on the page in the backend.
      2. Would it even be safe/secure to even attempt this since the js file would be referenced elsewhere (though still in a file on the pw install)