Carousels slick.js : 'getSlick' of undefined - javascript

i'm using Slick.js to make 2 caroussels connected, and they are syncronised.
Slick offers the possibility, at the section "Slider Syncing"
slick.js website
But when i'm using it, it doesnt work, i'm getting an error:
Uncaught TypeError: Cannot read property 'getSlick' of undefined
my code is :
$('#page-gravure .sliders .slides-show ul').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slides'
});
$('#page-gravure .sliders .slides ul').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slides-show',
centerMode: true,
focusOnSelect: true
});
Please guys, can you help me ?
EDIT: JSFIDDLE Example

The problem is that both of your references for the synced slider asNavFor: ... are wrong. The reference should be the same as you do to construct each slide. So your constructor functions should be as follows:
$('#page-gravure .sliders .slides-show ul').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '#page-gravure .sliders .slides ul'
});
$('#page-gravure .sliders .slides ul').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '#page-gravure .sliders .slides-show ul',
centerMode: true,
focusOnSelect: true
});
Here's a working JSFiddle
Cheers

Related

How to rearrange Slider Elements in mobile with Jquery?

I want to rearrange my slider in mobile version.I want slider start not with first but with thirt elemenet of slider.i wrote startSlide function on position 2 but still doesnt work plase help guys .
jQuery('.js-a1-wlan-slider').slick({
// normal options...
infinite: false,
slidesToShow: 1,
centerMode: true,
centerPadding: "26px",
focusOnSelect: false,
arrows: true,
prevArrow: '<a class="a1-wlan-slider-boxes-prev deactive"></a>',
nextArrow: '<a class="a1-wlan-slider-boxes-next"></a>',
initialSlide : 2,
dots: true,
mobileFirst: true,
responsive: [
{
breakpoint: 1023,
settings: "unslick"
}
]
});

Change js variable value from php

I have team-member-slick.js file.
I it has below code ( full code ) :
$(document).ready(function(){
$('.vertical-center-4').slick({
centerMode: false,
slidesToShow: 2,
infinite: true,
rtl: (document.dir === 'rtl'),
slidesToScroll: 2,
//speed: 300,
autoplay: true,
autoplaySpeed: 3000,
variableWidth: false,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: false,
arrows: false,
variableWidth: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
as below an example code, I must change showing number value with php from a php file:
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
all slidesToShow: 3, numbers must be depend a php variable because I will write a control panel this number.
So, how can I access js number variable from php file?
I will change the number with php saving ( after save button clicking ) then, the variable will load from server after re-load the customer page to change slide showing item number.

Slick Slider speeding up after mouse click on image

When clicking on an image within the Slick Slider all slides are moved forward with high speed. How to get rid of that behaviour?
My JS settings:
$(document).ready(function(){
$('.sh_product_slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
centerMode: false,
variableWidth: true,
infinite: true,
focusOnSelect: true,
cssEase: 'linear',
touchMove: false,
prevArrow:'<button class="slick-prev"> < </button>',
nextArrow:'<button class="slick-next"> > </button>',
responsive: [
{
breakpoint: 600,
settings: {
centerMode: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
pauseOnHover: false,
pauseOnFocus: false,
arrows:false
}
},
]
});
});
Im not sure but seems work according to your sample
just override the css class
.sh_product_slider2 .slick-slide:after {
position: relative;
}
let me know if not works,
thanks

slick.js How to make it visible for carousel thumbnail videos without hiding in mobile device

I can able to show 3 thumbnail carousel videos in desktop but I wanted to show all video thumbnails only in mobile device (I mean to show all carousel thumbnail videos), please help me out.
videoCarousel: function() {
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
initialSlide: 0,
arrows: false,
fade: !0,
asNavFor: ".slider-nav"
});
$(".slider-nav").slick({
slidesToShow: 3,
infinite: false,
slidesToScroll: 1,
swipeToSlide: true,
asNavFor: ".slider-for",
vertical: true,
arrows: false,
dots: false,
centerMode: false,
swipeToSlide: true,
focusOnSelect: true,
draggable: false,
responsive: [
{ breakpoint: 767 }
]
});
}

Stop autoplay after clicking on dots in slick.js

So, this is code I use for slider:
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true
});
And I want that after user clicks on any dot, it will disable autoplay. Then I tried this:
$('.autoplay').on('init', function() {
$('.slick-dots').click(function() {
$('.autoplay').slick('autoplay', false);
});
});
But no help. Here is DEMO from jsFiddle. Is this possible with slick.js?
Try this
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
dots: true
});
$('.slick-dots').on('click', function() {
$('.autoplay').slick('slickPause');
});
From one of the issues in the github-forum, I saw that you have to attach init event before initializing with slick.
$('.autoplay').on('init', function(slick) {
$('.slick-dots').on('click',function() {
$('.autoplay').slick('slickPause');
});
}).slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
})
DEMO HERE
You can use
$('.slick').slick('slickPause');
to pause. You can play it again with
$('.slick').slick('slickPlay');

Categories

Resources