Having trouble making 2 swiperJS Sliders work together.
The conflict seems to be in the for each, or the JS column in codepen / the external script file that initializes the slider.
Anyone have any ideas on how i can get them both to work together? For example, if you take the script from the 2nd one, and put it into the script column in slider one you'll see it breaks it. Or, if you do the opposite, it breaks it too.
It doesn't look like it's a matter of them both being called .swiper-container because the 2nd one ID's the swiper with #swiper1
SLIDER 1: Codepen
SLIDER 2: Codepen
The JS that makes this one work is:
(function () {
'use strict';
const mySwiper = new Swiper('#swiper1', {
loop: true,
autoplay: 4000,
slidesPerView: '1',
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
// pagination
pagination: '.swiper-pagination',
paginationClickable: true,
// navigation arrows
nextButton: '#js-prev1',
prevButton: '#js-next1' });
})();
any help would be appreciated!
If you look at both Codepen's it'd be most helpful i'm thinking.
slider 1 works great and i dont want to mess with that one as it's telling it to show a certain amount of slides per view.
Here is complete working example https://jsfiddle.net/710x569p/ As i told you in another answer don't use same selector and exclude #swiper1 from .swiper-container
var mySwiper = new Swiper('.swiper-container:not(#swiper1)'
I have a slickJS carousel that I am using with ~ 12 menu items. On a message from a websocket connection, the page is re-loaded with up-to-date information via AJAX, the HTML including the slickJS carousel. The carousel re-initializes fine cosmetically, however the controls (arrows, click-n-grab) do not work. I can pick a new 'menu item' from the current view but nothing else is functional. I have also tried manually re-initializing slick using
$('.my-menu-list').slick('unslick').slick('reinit');
but that yields the same result. For reference, my init command for slick is
$(document).ready(function(){
$('.my-menu-list').slick({
arrows: true,
infinite: true,
lazyLoad: 'progressive',
speed: 600,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: $('.my-menu-list.active').data('slick-index')
});
});
and it is loaded from an external file.
I am using a Cube Slider 3d plugin for a slideshow and I have it starting on 'mouseenter' using jQuery, which works fine. I want it to stop on 'mouseleave' and cannot get it to work. Been unable to find anything to guide me in the right direction. Please see the code below. It is the code I use to start. As you can see, there is an autoplay option, which I set to 'true'. Logic would tell me to set the value to false on mouseleave, but that does not work and seems a bit redundant to use cubeslider() again. I have also tried jQuery method stop() and thought about trying to use setInterval() and clearInterval() with it somehow. With using a jQuery plugin it doesn't seem like much additional jQuery/JavaScript would be needed. I could be wrong as I've been neglecting jQuery/JavaScript for another focus and probably need a refresher on many JavaScript concepts. Any help is appreciated. Thanks
$('#cubeSlide').mouseenter(function() {
$('#cubeSlide').cubeslider({
cubesNum: {rows:1, cols:1},
orientation: 'h',
autoplay: true,
autoplayInterval: 500,
perspective: 1200,
mode3d: 'auto',
arrows: false,
navigation: false,
addShadow: false,
});
});
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 am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!
There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});