Develop Reference

Slick Slider sometimes works, sometimes doesn't

I'm using slick slider for a slider on a WP page template I built for a client, and I'm running into a problem where the slider sometimes initializes okay, and sometimes it doesn't initialize at all. I can't find a solution to why is it happening.
When it doesn't initialize it just shows the slider content as full width images. Screenshots included.
This is how it looks when it's ok:
This is how it looks when it doesn't:
This is the slick slider code:
// Initialize slick slider
$('.sample-class').slick({
slidesToShow: 8,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: true,
autoplay : true,
autoplaySpeed: 3000
});

How to Counting numbers of the Slick Slider thumbnails

in a website that i developed , i using the "Slick Slider" and i want to count the numbers of the thumbnails, in the Jquery / js file i write the thumbnails will show as 5 , with centerMode:true,
i want (with your help, of course) to write a function that count the number of the thumbnails -
When the number is 5 OR LESS than the option of centerMode will be false (so if this 5 thumbnails or 2 thumbnails when this is on false the thumbnails will be centered bottom the big picture),
When this 5 thumbnails an ABOVE this working fine.
Thank you For Advanced...
This is the code what i have (but when the thumbnails is 5 or less they are not centered)
/** Project Slider **/
$('.single-project-slider-wrraper').slick({
rtl: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.single-project-nav-wrraper'
});
$('.single-project-nav-wrraper').slick({
rtl: true,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-project-slider-wrraper',
dots: false,
centerMode: true,
infinite: true,
arrows: true,
focusOnSelect: true
});

OK, if no one answer to me so i give the answer - the solution was that i need to switch between the js files of slick slider. i loaded the minified js ( it turns out that somthing wrong there..i don't know what ) and i needed to load the full/normal js file - slick.js , when i loaded the slick.js file the slider behave as i want (as i ask in the post above exactly ).
maybe it is strange but this is the solution :-)

Disable next/prev partial view in center mode slick slider

I want to use center mode in slick slider but need to avoid partial prev/next slides. (Just show the three main divs only)
My settings is like this,
$('.framefitFacelist').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: false,
centerMode: true
});
Thanks.

Hi you can change this with javascript. You have to set the opacity of the partial slides to 0;
Essentially you can create a variable and set prev and next slide opacity to 0 when concatenating css and then call the beforeChange slick event.
I found this fiddle that seems to achieve what you are looking for.
test it out
https://jsfiddle.net/yassarikhan786/uwgjx6nv/

Next/Prev button not work when using slickGoTo

I'm using the Slick slider in my website and when I try to use the slickGoTo function, I see an issue. slickGoTo works perfectly, but after I use it, my next/prev buttons and also the drag for changing slides does not work at all.
What must I do to fix this issue?
$(document).ready(function(){
$('.calendar_slide .rail ul').slick({
dots: false,
infinite: false,
draggable: true,
speed: 300,
slidesToShow: 10,
slidesToScroll: 1,
nextArrow: '.arrow_prev',
prevArrow: '.arrow_next',
rtl: true
});
$('.calendar_slide .rail ul').slick('slickGoTo', 38);
});
When I set the infinite option to true, the issue is fixed. However, I don't want to use the infinite mode.

Need help properly extending jQuery Slick Slider plugin to change how it slides

I have been given a task to change how our slider works. We use the jQuery plugin called Slick Slider to display news blurbs.
What they want me to do is to have the previous/next buttons and autoplay to all move the slider one slide at a time in all modes (mobile, tablet, and desktop). Ok not a problem, I set that up easily enough. Then they asked me to change it so that it displays one dot for every 3 slides and clicking those dots moves the slider 3 slides at a time.
Obviously this is going to require me making modifications to the functions in slick.js. I don't see any built in functionality to do this. I am trying to figure out how to extend this library and override the functions one at a time. To be honest I am not sure how to do this properly with jQuery plugins.
This is complicated by the fact that we are running this in Drupal. I have setup a JS Fiddle with a close approximation of what we are doing right now.
JS Fiddle: https://jsfiddle.net/9z52tfkw/
My slick initiation code is here:
(function($) {
$('.my-slider').slick({
speed: 1000,
autoplay: true,
dots: true,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
focusOnSelect: true,
appendArrows: $('.controls'),
prevArrow: '<button type="button" class="prev">Prev</button>',
nextArrow: '<button type="button" class="next">Next</button>',
responsive: [
{
breakpoint: 960,
settings: {
dots: true,
slidesToShow: 3
}
},
{
breakpoint: 769,
settings: {
dots: true,
slidesToShow: 2
}
}
]
});
}(jQuery));
Slick Slider details and code can be found here: http://kenwheeler.github.io/slick
I am using version 1.5.6. A copy of the same version of slick.js can be found here: https://github.com/kenwheeler/slick/blob/1.5.6/slick/slick.js
To clarify, I am not asking that anyone do the overrides for me. Instead I am asking for help in overriding the plugin's functions or otherwise extending the plugin. I am capable from there, though will be grateful for any help provided.
I think this will also help me in the future with other jQuery plugins. Thanks!

You can always just remove 2 out of three of the dots :)
i.e. add this to the end of the init:
.find('.slick-dots li').filter(function(i,e){
return (i % 3 != 0);
}).hide();
JSFiddle: https://jsfiddle.net/TrueBlueAussie/9z52tfkw/2/
For a more obvious example: jsfiddle.net/9z52tfkw/3