Slick Slider

Override Slick Slider options:#

Almost all sliders and carousels in Kallyas are based on Slick Slider . As you can see here there are tons of options of Slick slider, but in order to maintain a good performance in our page builder’s elements, we only added the most popular and essential options.

There are times when you might want to change a specific Slick slider option which isn’t available in the page builder element’s options. Luckily the Slick Slider API is quite powerful and has a lot of methods, including an option overridability.

Let’s take an example. The option called “pauseOnHover” is by default true, however if you want to disable it, you could add this code into Kallyas options > Advanced > Custom JS editor:

jQuery(window).load(function(){
 
  jQuery(".a_custom_selector.js-slick").slick('slickSetOption', 'pauseOnHover', false, true);

});

As you can see in this example we’re applying the slickSetOption method to the .a_custom_selector.js-slick which already has a Slick Slider applied on it. You will most likely need to find the custom css selector. To do so, try to right click the slider and click on Inspect Element in the contextual menu eg: http://hogash.d.pr/2Vp8 for Chrome or http://hogash.d.pr/Wm5b for Firefox. After the Developer Tools Tray is opened, you will need to locate the .js-slick selector which is usually accompanied by a data-slick="{ .. }" attribute. In our example eg: http://hogash.d.pr/U69f , the “identifier” class of this element is .recentwork_carousel__crsl therefore the final class selector is .recentwork_carousel__crsl.js-slick .

The second statement – false, will practically force pauseOnHover option to be disabled. The last true statement will force the slider refresh.