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
});

Slick slider - double tap bug on iOS

I have a problem with slick slider. It makes me double-click the buttons to make them work properly. For example "zobacz całą ofertę" button or "go up" button. It works badly only on iOs. On Android, Windows, iMac works perfectly. Can someone tell me what it's wrong? On subpages without slick slider everything is ok.
http://fruktatrans.pl/
(function ($) {
$('.carousel').slick({
dots: false,
infinite: true,
speed: 500,
autoplaySpeed: 5000,
fade: true,
cssEase: 'linear',
autoplay: true,
appendArrows: $('#arrows'),
nextArrow: '<span class="slick-next slick-arrow"></span>',
prevArrow: '<span class="slick-prev slick-arrow"></span>',
});
})(jQuery);

Is there any way to have both slidesToScroll and swipeToScroll behavior in a slick carousel?

I have a carousel with variable widths, I would like for it to have a behavior of scrolling all displayed blocks and also for the user to swipe to any spot, but no matter how I try, they seem to contradict each other.
Here's my configuration:
$('.carousel').slick({
infinite: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 7,
swipe: true,
swipeToSlide: true,
});
Is there any workaround for this problem?
I have a codepen with the example below:
https://codepen.io/vicpantoja/pen/NWxqKzO

The issue is using the swipeToSlide option. Setting swipeToSlide: true overrides slidesToScroll. From the website, "Allow users to drag or swipe directly to a slide irrespective of slidesToScroll" (http://kenwheeler.github.io/slick/).
If you want 7 slides to show at one time and a swipe (or 'next' button click) to show the next set of 7, you can do it by setting these three options and removing swipeToSlide:
slidesToShow: 7
slidesToScroll: 7
swipe: true
In your case:
$('.carousel').slick({
infinite: false,
variableWidth: true,
slidesToShow: 7,
slidesToScroll: 7,
swipe: true
});

Slick Slider with Visual Composer

I want to use slick slider with sync option in my theme. I added js&css files in my functions.php. I created row in VC, then 2 columns. In first column I have 3 paragraphs. On second column I have 3 images. I want to scroll paragraphs and the change images. This is how it looks now
in my custom js I added something like this
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
In result I got something like this
What's wrong wrong with my code? Where I should add classes for slick slider? Thank you for any help!

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/