Jump to content
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    682

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,693

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    682

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • adisharma
      Typescript vs Javascript
      By adisharma
      Hello Everyone, I am new in this community and I am learning typescript but my friend was suggested to me go with javascript profile because it is most popular scripting language for many web projects and huge community support with lots of documentation and support for solving issues. Can anyone clear this point which one is better for future points of view typescript or javascript?
    • Majesrse
      Convert Jquery to vanilla js
      By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • CareerTeam GmbH
      Webdesign Freelance Job
      By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • Orkun
      Extended InputfieldDatetime Module Settings doesn't work correctly
      By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
×
×
  • Create New...