Somehow I'm unable to use slick carousel (http://kenwheeler.github.io/slick/) correctly.
I'm getting the following error:
Uncaught TypeError: $(...).slick is not a function
I'm running the following code in my javascript file:
function initSlider(){
$('.references').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
});
}
I've included the latest jQuery version (2.1.4) with bower. I've also tried including the jQuery CDN in the head of my layout template file, but that didn't resolve anything either.
The only thing strange that could mean something is that when I don't use a function to call the slider, it does work but it gives me the error:
Uncaught TypeError: Cannot read property 'add' of null
I found out that that means that the code has been loaded before the DOM was loaded, which is correct (I think).
Edit: I've created a JSFiddle from my code: https://jsfiddle.net/brz30e77/
EDIT2: The error persisted every now and then when adding new function to my JS file. I ultimately stripped my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
I found the solution myself later, so I placed it as an answer:
The error persisted every now and then when adding new function to my JS file. I ultimately stripped down my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
Recently had the same problem: TypeError: $(...).slick is not a function
Found an interesting solution.
Hope, it might be useful to somebody.
In my particular situation there are: jQuery + WHMCS + slick.
It works normal standalone, without WHMCS. But after the integration to WHMCS an error appears.
The solution was to use jQuery in noConflict mode.
Ex:
Your code:
$(document).ready(function() {
$('a').click( function(event) {
$(this).hide();
event.preventDefault();
});
});
Code in noConflict mode:
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq('a').click( function(event) {
$jq(this).hide();
event.preventDefault();
});
});
The solution was found here:
http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
You failed to load the slick.js file. Add this script file https://kenwheeler.github.io/slick/slick/slick.js.
I updated your JSFiddle by adding an external file on left sidebar External Resources. Then it doesn't report the error: $(...).slick is not a function.
It's hard to tell without looking at the full code but this type of error
Uncaught TypeError: $(...).slick is not a function
Usually means that you either forgot to include slick.js in the page or you included it before jquery.
Make sure jquery is the first js file and you included the slick.js library after it.
Thought this would be helpful for others with the same issue, as I've seen a few on here - I ran into this, but found I loaded slick.js AFTER my main.js (which was calling the slick() function). swapped the two and it works great
Try:
function initSlider(){
$('.references').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
});
}
$(document).on('ready', function () {
initSlider();
});
Also just to be sure, make sure that you include the JS file for the slider after you include jQuery and before you include the code above to initialise.
Old question, but I have only one recent jQuery file (v3.2.1) included (slick is also included, of course), and I still got this problem. I fixed it like this:
function initSlider(selector, options) {
if ($.fn.slick) {
$(selector).slick(options);
} else {
setTimeout(function() {
initSlider(selector, options);
}, 500);
}
}
//example: initSlider('.references', {...slick's options...});
This function tries to apply slick 2 times a second and stops after get it working. I didn't analyze it deep, but I think slick's initialization is being deferred.
I had the same problem. When i was trying and testing on a browser on my PC machine i didn't have the "not a function" error, but when i tried on a virtual machine the error was popping. I'd solved it by adding the slick files on my web server and adding the urls of the css and js files from my web server to my html. Before that i was pulling the css and js from CDN.
I'm not 100% sure, but I believe the error was caused by some client-side JavaScript that was turning exports into an object.
Some code in the Slick plugin (see below) calls the require function if exports is not undefined.
Here's the portion of code I had to change in slick.js. You can see I am just commenting out the if statements, and, instead, I'm just calling factory(jQuery).
;(function(factory) {
console.log('slick in factory', define, 'exports', exports, 'factory', factory);
'use strict';
// if (typeof define === 'function' && define.amd) {
// define(['jquery'], factory);
// } else if (typeof exports !== 'undefined') {
// module.exports = factory(require('jquery'));
// } else {
// factory(jQuery);
// }
factory(jQuery);
}
I found that I initialised my slider using inline script in the body, which meant it was being called before slick.js had been loaded. I fixed using inline JS in the footer to initialise the slider after including the slick.js file.
<script type="text/javascript" src="/slick/slick.min.js"></script>
<script>
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
});
</script>
In my instance the solution was moving the jQuery include just before the </head> tag. With the Slick include at the bottom before the </body> and just before my script include that initiates the slider.
I've had the same problem before recognized that I've put the code after closing the body tag.
After moving it into tag, it's OK now
<body>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</body>
I solve this by simply add 'https:' to slick cdn link gotfrom slick
you didnt include the reference of slick
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Please check the cnd or slick.min.js is properly linked. if slick.min.js is not properly linked then it shows this type of error.
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js
Include the script tag before the slick function is used in your HTML template
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
If you want to control the slider of Slick.js you can use
For Next
$('slick_selector').slick("slickNext");
For Prev
$('slick_selector').slick("slickPrev");
For version > 1.5
Make sure that you link slick.min.js file before the jQuery slick function and JQuery slick function appears after slick.min.js file.
For me, the problem resolves after I changed:
<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>
to
<script src='../../path-to-slick/slick.min.js'></script>
My work is based on Jquery 2.2.4, and I'm running my development on the latest Xampp and Chrome.
In Laravel i solve with:
app.sccs
// slick
#import "~slick-carousel/slick/slick";
#import "~slick-carousel/slick/slick-theme";
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('slick')
require('slick-carousel')
}
package.json
"jquery": "^3.2",
"slick": "^1.12.2",
"slick-carousel": "^1.6.0"
example.js
$('.testimonial-active').slick({
dots: false,
arrows: true,
prevArrow: '<span class="prev"><i class="mdi mdi-arrow-left"></i></span>',
nextArrow: '<span class="next"><i class="mdi mdi-arrow-right"></i></span>',
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 800,
slidesToShow: 1,
});
I building an app in Rails 4. I have the below JS plugins on my show page but they seem to work only when I manually reload the page.
I read that this might be due to turbolinks but since these plugins are in the body and not the head, it doesn't seem like a turbolinks issue.
I even tried pasting these in the head and the footer tags but these gave me the same issue. Sometimes, one of the plugins loads and the other doesn't.
The first plugin below are AddThis social buttons and the other is an image gallery.
Any suggestions?
Demo page http://mktdemo.herokuapp.com/listings/45
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ashfaaq">
</script>
<script>
jQuery(document).ready(function($) {
$('#gallery-1').royalSlider({
fullscreen: {
enabled: true,
nativeFS: true
},
controlNavigation: 'none',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 850,
imageScaleMode: 'fit-if-smaller',
navigateByClick: true,
numImagesToPreload:2,
arrowsNav:true,
arrowsNavAutoHide: true,
/* arrowsNavHideOnTouch: true, */
keyboardNavEnabled: true,
fadeinLoadedSlide: true,
globalCaption: false,
globalCaptionInside: false,
loop: true,
thumbs: {
appendSpan: true,
firstMargin: true,
paddingBottom: 4
}
});
});
</script>
You can find the answer to your question here:
Rails 4 turbo-link prevents jQuery scripts from working
Rails 4 is using Turbolinks, which load the page javascript and css only once and then replaces only the body and title in the header. This is why jQuery(document).ready will only work if you reload the page.
In order to trigger your javascript, you have to use Turbolinks events like
page:change the page has been parsed and changed to the new version and on DOMContentLoaded
or
page:load is fired at the end of the loading process.
More details here: https://github.com/rails/turbolinks/#events
Here you can just replace your
jQuery(document).ready(function($) {
...
By
$(document).on('page:load', function($) {
...
Sounds like turbolinks is the cause of your problems.
You can either install this gem: Jquery Turbolinks
Or you could replace
jQuery(document).ready(function(
....
));
with
$(document).on('page:load', function(
....
));
Here is a nice copy/paste of why turbolinks causes some problems with jquery.
TurboLinks is a PJAX like library that asynchronously requests the content of the next page and inserts it into the current page’s body instead of requiring a full page reload. It speeds up page load times nicely. However, because the page is reloaded, the DOMContentLoaded event is triggered and your jQuery document.ready event wont be triggered.
Source
I had the same issue with my jQuery image gallery on Rails 5. It would not load unless the page was refreshed. After a year of (on and off) trying, here's the hack that worked for me:
Wrap your jQuery gallery code in a function:
var delayLoad = function(){
$('#gallery-1').royalSlider({
...
})
}
Then call it with setTimeout:
setTimeout(delayLoad, 250)
This solved the issue for me every time without having to refresh the page.
how can use this loading page plugin (only for js) when my php codes are working?
I don't know java script/ajax! but I understand php/css/html :)
this plugin named "PACE" only load progress bar for javascript works (automatically) but I want use it for my php codes when they're running. example my thumb generator takes 30s.
gethub link for pace: https://github.com/HubSpot/pace
Documentation of pace (that I don't know how works!): http://github.hubspot.com/pace/
my time-consuming PHP code in the page:
dothumbgen($a,$b);
how can use PACE for this function?
To use this plugin, follow steps bellow:
Download this PACE jQuery plugin in: http://github.hubspot.com/pace/docs/welcome/
Include the plugin in your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/HubSpot/pace/v0.5.6/pace.min.js"></script>
Put this code in this your footer document:
<script type="text/javascript">
$(document).ajaxStart(function() {
Pace.restart();
}).ajaxStop( function() {
Pace.stop();
}).ajaxError( function(event, request, settings) {
Pace.stop();
}).ajaxComplete( function(event, request, settings) {
Pace.stop();
});
</script>
So it works perfectly when it's inline between tags, but how can I put this in an external js file and have it run? I copied it verbatim and it won't work. What's the issue?
edit: you can see the tutorial I'm working off of here: http://popcornjs.org/popcorn-101
code:
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop_Stephen = Popcorn("#vid_Stephen");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop_Stephen.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "pop"
});
// play the video right away
// pop_Stephen.play();
}, false);
edit: OK it seems that it just doesn't work within CODA2, which is a bummer. Any idea why this is?
I'm betting that your <script /> tags have you loading your external file before the Popcorn library.
Make sure you load
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
before your external file.
Perhaps use the Utility Method Popcorn.getScript?
http://popcornjs.org/popcorn-docs/utility-methods/#Popcorn.getScript
from the site:
Popcorn.getScript("yourscript.js");
inside <head> tag i declare a jQuery function as follows (menu animation function) ;
<script type="text/javascript">
$(function() {
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
and inside <body> tag i use javascript function as follows (slideshow function) ;
<script type="text/javascript" src="scripts/slideshow.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
the problem is only slideshow function excuting while loading not menu animation; if i remove the slideshow function, menu animation script is working!
kindly guide me to sort of the problem
Try to wrap your javascript code in $() in the body tag like this. Since this code inline in the markup it will be executed right away before even all the resources on the page are loaded. May its causing a js error on the page. You and check the console log if you find any js error on the page.
$(function(){
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
After lot of days research I got a fix for the conflict with jquery;
I have replace all $$( with dbl( and $( with sgl( in the javascript file (slideshow.js).
then in the html file i have modified first two lines of my code, as follows;
sgl('slideshow').style.display='none';
sgl('wrapper').style.display='block';
Now both (javascript & jquery) working smoothly. Thank you so much #ShankarSangoli - for your effort.