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 :-)

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

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.

Add "swipe-like" mouse events

I have a problem with a new magento theme I'm creating from RWD base. In my page I have a lot of small sliders showing the products.
all of these sliders are using the slideshow.js provided from magento and it slide really well in desktop (mouseclick on prev/next button) and in mobile (swipe left and right).
The problem is because I have to implement the swipe left and right on the desktop view.
This is the simple jquery function I'm using right now
$j('.slideshow-container1 .slideshow1')
.cycle({
slides: '> li',
pager: '.slideshow-pager',
pagerTemplate: '<span class="pager-box"></span>',
speed: 600,
pauseOnHover: true,
swipe: true,
prev: '.slideshow-prev1',
next: '.slideshow-next1',
fx: 'scrollHorz'
}).cycle('pause');