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.js carousel not initializing in tabs

slick.js carousel won't initialize in second tab. When I open the second tab the main video does not show until I click the dots.
I tried using $(videoSlider).slick('setPosition'); and also added .each function which does work but not if sliders are in the tabs. If I have numerous carousels on a page they function prooperly. It is only when put in tabs it does not work.
// initialize slick sliders
$(videoSlider).each(function() {
$(this).slick({
arrows: false,
dots: true,
infinite: true,
speed: 500, slidesToShow: 1,
slidesToScroll: 1
});
});
Carousel will work in tabs as it does when out of tabs

An issue that stands out is in your selector for videoSlider. This needs to be a string value and should most likely be '.videoSlider' to match a class used in your markup.
You may also run into an issue if you initialize a slideshow while it's hidden in a tab. In this case, Slick has trouble determining the slide width and assigns a width of '0px' to each slide. You can overcome this issue by refreshing your slideshow when you reveal your tab's contents. For instance, if your slideshow has id="slideshow1":
$("#slideshow1").slick("refresh");
More information about the hidden slideshow issue: https://github.com/kenwheeler/slick/issues/235

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/

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

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