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

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

Making Thumbnails Change the Image Displayed on a Slider

I have a (primary) slider (showing mostly images - one at a time) on the bottom of which is another slider of thumbnails. I am trying to make the thumbnails such that clicking on one automatically display that image on the primary slider. The jQuery I used to do that is as follows (jump to the last function):
$(document).ready(function(){
main_slider = $('.bxslider').bxSlider({
speed: 500,
adaptiveHeight: true,
video: true,
auto: true,
autoHover: true,
autoControls: true,
autoControlsCombine: true
});
thumb_slider = $('.thumbnailslider').bxSlider({
slideWidth: 40,
minSlides: 2,
maxSlides: 15,
slideMargin: 2
});
this_slider_index = $('.bxslider project_gallery_view gallery_project_display a.main_display').attr("href");
$('.thumbnailslider a.bx-clone').click( function(){
$('.thumbnailslider a.bx-clone').attr("href", this_slider_index)
});
});
What I'm doing here is making an on-click function for each thumbnail of the thumbnail class. I then set the href attribute of each to the index of each image in the primary slider. However, my sliders act as if this function doesn't exist, which means that I'm clearly missing something. I've tried searching for solutions for hours, but cannot figure out what I did wrong here.
(Disclaimer: I'm not very familiar with jQuery either, so please forgive me if it's something obvious.)

jCarouselLite plugin not working as expected

This problem is plaguing me. I've used jCarouselLite for years and years, I even added a "fade" feature to the original library released by Ganeshji Marwaha for my own use. I recently switched to the new plug-in because it is still supported, it uses touch events, and it can be responsive. But I have had no luck in using it.
I am almost certainly doing something stupid, but I can not figure out what... Can anyone take a look with fresh eyes at this homepage implementation?
http://staging.tbc1927.com/www/
The implementation here is not responsive, but I would like swipe supported.
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
The CSS is simple enough, and I am letting the plug in do the heavy lifting. The jQuery I am using is the same as they recommend (1.7.2), though I had been using a newer version as well with no luck (1.8).
When the carousel initially loads, the first slide is fine. Then it goes away, and the whole carousel is positioned WAY off the page. The longer the carousel runs, the more off the page it is positioned.
What am I missing?

The author of the plug in helped me out here. The plug in changed the "auto" option to a boolean value, and the "12000" value was throwing it off. To set the animation delay, the plug in now uses a parameter called "timeout". The correct implementation script should be:
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: true,
timeout: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});