Introduction #
Hey there. This part isn't written by Kevin, but by me, Tschallacka. I'm slowly updating the documentation to
bring it up to date, but there's a lot of old stuff here still.
I've invested some time to upgrade this library to NodeJS because I was encountering some
issues with the original script within my node application.
This part doesn't cover the "vanilla" uses the original documentation covers
but the added functionality by me and a bit how to use it in your NodeJS application.
The tone of this document may be a bit different, and if you were wondering why, this is why.
Page 1 and 2 largely use the "old" approach via the jQuery function. This page largely concerns with the NodeJS implementation and newly added features.
Simplest node application#
When you wish to start the slider on an element from your NodeJS application, you can do this by initializing a LiquidSlider instance and pass the target element(DOM object or jQuery instance) and options to the LiquidSlider instance.
The below samples can also be found in the demo file in the src directory.
To compile the demo call first install the dev dependencies
npm install --only=dev once, and then you can use gulp browserify to compile the demo used in these example pages,
gulp less to compile the less file,
if you wish to fiddle around with the samples under this page.
document.addEventListener("DOMContentLoaded", () => {
let slider9 = document.getElementById('slider-9');
if(slider9) {
let LiquidSlider = require('liquid-slider'),
slider_nine = new LiquidSlider(slider9, {
autoHeight:true,
slideEaseFunction:'animate.css',
slideEaseDuration:1000,
heightEaseDuration:1000,
animateIn:"rotateInUpRight",
animateOut:"rotateOutUpLeft"`
});
}
}
If you don't wish to use the methods implemented by the october foundation section, to dispose of your LiquidSlider by triggering events on the DOM,
you can trigger the self clean up directly from code. When you have a reference to the LiquidSlider instance, you can invoke
liquidSliderInstance.sysDestroy().
Why not liquidSliderInstance.destroy() you ask? Because sysDestroy cleans up
everything related to the instance and a lot of "under the hood" stuff, and a method named destroy() is much nicer name to present to
people extending the framework for their own purposes when cleaning up their own objects.
let $destroyable = $('#destroyable_from_npm');
if($destroyable.length > 0) {
let slider_destroy = new LiquidSlider($destroyable, {
autoHeight:true,
slideEaseFunction:'animate.css',
slideEaseDuration:1000,
heightEaseDuration:1000,
animateIn:"rollIn",
animateOut:"rollOut"
});
$destroyable.on('what_can_i_say_except_delete_this', () => {
slider_destroy.sysDestroy();
setTimeout(()=>{$destroyable.fadeOut('slow');}, 3000);
});
}
}October foundation#
This liquid slider now makes use of the october foundation framework as I have adapted it for node js. There are a few handy features now, like being able to initiate and destroy the liquid slider instance via easy control features, with minimal javascript required.
Any element you now tag with data-liquid-slider will become initialized the
moment the "render" event is triggered on the document. The below small slider is built that way
You can now also pass all the options of the liquid slider as data attribute options.
Any captial letter becomes a lower case letter with a dash in front of it.
slideEaseDuration:2500, becomes
data-slide-ease-duration="2500"
slide_1
<div data-liquid-slider data-slide-ease-duration="2500">
<div>
<h2 class="title">slide_1</h2>
test slide 1
</div>
<div>
<h2 class="title">slide_2</h2>
test slide 2
</div>
<div>
<h2 class="title">slide_3</h2>
test slide 3
</div>
</div>slide_2
test slide_2slide_3
test slide_3
The $(document).trigger("render")
should be executed on page load at least to enable this functionality.
When this event has been triggered, it will scan the document for any uninitialized elements tagged with
data-liquid-slider and attempt to initialize them.
Ideally you trigger "render" after each content change via javascript/xhr request.
When the liquid slider element has been initialized it has gained the attribute data-disposable and listens to an event called "dispose-control".
<button onclick="$('#slider-9').trigger('dispose-control');">destroy slider</button>This event will trigger an automatic unbinding of the LiquidSlider event handlers, clean up of added classes and DOM elements within the selected element and a wiping of all attached variables to the LiquidSlider instance.
A normal way how one would handle this is when the liquid slider gets replaced entirely by something loaded via ajax would be
let $wiped = $('#wipe-10');
$wiped.find('[data-disposable]').trigger('dispose-control');
$wiped.html(ajax_response_html_content).trigger('render');
This ensures that all foundation based objects are unbound within the to be replaced content, without having to worry about the individual components bound to elements(if they are using the foundation framework).
With this move you can dispose of multiple sliders in a container in one fell swoop,
or if you also use the foundation framework to build your own components they get cleaned up too.
The only thing it won't do is remove the original content of the slider. It is up to you to actually
.remove() it or replace it with new content.
If you don't remove the element it may cause the element to be re-initialized when "render" is called anew.
Press the buttons to destroy the slider above, to re-initialize the same slider, or to replace the slider with another slider.
Ajax#
As laid out above, this slider now also uses the october framework.
If you trigger the "dispose-control" on data-disposable tagged
DOM elements before replacing html content, you should be fine and dandy.
Should you be replacing it with a new slider just call $(document).render()
A thing that is supported in this framework by itself is the use of the octobercms request api method.
This is not essential to the workings of the liquid slider, but if you are interested you can read up
at the relevant git repo and the
links placed to the other packages
within to understand how to use it.
When you don't use OctoberCMS you might have to build your own wrapper to read out the relevant headers
to direct the ajax requests to the appropiate server side application handler.
Binding to a second jQuery instance#
Sometimes, for whatever reason, you have multiple versions of jQuery running on the same page.
Default the LiquidSlider will bind itself to the default jQuery instance that is returned by
require('jquery').
If you have an older version, or a secondary MSIE compatible version of jQuery running, you can
bind the LiquidSlider to that jQuery by calling LiquidSlider.bindTojQuery(another_jquery_instance);
Do note that although the jQuery.fn.liquidSlider() method gets registered on the provided jQuery instance,
the internals of liquidSlider still use the default returned jQuery instance by require('jquery'). Your milage may vary.
When you try to bind the LiquidSlider function a second time to a jQuery instance an error warning will be shown in the console. If you hit F12 you should see the error. It's quite harmless, but allows you to pinpoint where you duplicate your work.
If you try to initalize LiquidSlider for a second time on an already existing instance, an error will be thrown.
This will halt your execution flow when not caught.
Open your console and click this button to see how such an error would present itself.
Access the instance#
When you initialize the LiquidSlider from your NodeJS application, you have direct access to the instance.
Just keep it around until you don't need it anymore.
let LiquidSlider = require('liquid-slider'),
// hang on to my_slider
my_slider = new LiquidSlider(element, {
autoHeight:true,
slideEaseFunction:'animate.css',
slideEaseDuration:1000,
heightEaseDuration:1000,
animateIn:"rotateInUpRight",
animateOut:"rotateOutUpLeft"`
});
When you initialize the slider via the jQuery function or any other method, you can access the instance via jQuery data value liquidSlider.
let $slider = $('#slider');
$slider.liquidSlider({
autoHeight:false,
slideEaseFunction:'animate.css',
slideEaseDuration:1000,
heightEaseDuration:1000,
animateIn:"rotateInUpRight",
animateOut:"rotateOutUpLeft"
});
let liquidSlider = $slider.data('liquidSlider');
When you initialized the LiquidSlider via the data attributes api and triggered the 'render' event, you can
access the liquid slider also in the 'oc.LiquidSlider' jQuery data value.
Changing the easing#
For the timing of the sliders there are several easing methods that are used to control the animation added by default you can access to give your slides a nice swing
{
easeOutCubic: 'cubic-bezier(.215,.61,.355,1)',
easeInOutCubic: 'cubic-bezier(.645,.045,.355,1)',
easeInCirc: 'cubic-bezier(.6,.04,.98,.335)',
easeOutCirc: 'cubic-bezier(.075,.82,.165,1)',
easeInOutCirc: 'cubic-bezier(.785,.135,.15,.86)',
easeInExpo: 'cubic-bezier(.95,.05,.795,.035)',
easeOutExpo: 'cubic-bezier(.19,1,.22,1)',
easeInOutExpo: 'cubic-bezier(1,0,0,1)',
easeInQuad: 'cubic-bezier(.55,.085,.68,.53)',
easeOutQuad: 'cubic-bezier(.25,.46,.45,.94)',
easeInOutQuad: 'cubic-bezier(.455,.03,.515,.955)',
easeInQuart: 'cubic-bezier(.895,.03,.685,.22)',
easeOutQuart: 'cubic-bezier(.165,.84,.44,1)',
easeInOutQuart: 'cubic-bezier(.77,0,.175,1)',
easeInQuint: 'cubic-bezier(.755,.05,.855,.06)',
easeOutQuint: 'cubic-bezier(.23,1,.32,1)',
easeInOutQuint: 'cubic-bezier(.86,0,.07,1)',
easeInSine: 'cubic-bezier(.47,0,.745,.715)',
easeOutSine: 'cubic-bezier(.39,.575,.565,1)',
easeInOutSine: 'cubic-bezier(.445,.05,.55,.95)',
easeInBack: 'cubic-bezier(.6,-.28,.735,.045)',
easeOutBack: 'cubic-bezier(.175,.885,.32,1.275)',
easeInOutBack: 'cubic-bezier(.68,-.55,.265,1.55)'
}
let LiquidSlider = require('@tschallacka/liquidslider');
LiquidSlider.EASING_FUNCTIONS['popGoesTheWeasel'] = 'cubic-bezier(1, -0.5, 0, 1.64)';
let ls = new LiquidSlider($('#slider-easing'), {
slideEaseFunction: 'popGoesTheWeasel',
});
Now if you want a custom easing, just to that slider instance you currently have, you can access the current instances easing methods via
instance.easing. The moment the slider is instantiated,
it will not use any easing methods added to the default table afterwards.
This code will not work because the default popGoesTheWeasel was added after instantiation.
let LiquidSlider = require('@tschallacka/liquidslider');
let ls = new LiquidSlider("#mySlider");
LiquidSlider.EASING_FUNCTIONS['popGoesTheWeasel'] = 'cubic-bezier(1,-0.5,0,1.64)';
ls.options.slideEaseFunction = 'popGoesTheWeasel';
Now if you want to modify the easing behaviour of instantiated liquid sliders, you need to use instance.easing.
The below code adds a new easing the the above slider instance wit this button
$('#dynamic_change_easing').on('click', (e) => {
if(!ls.easing['waitForIt']) {
ls.easing['waitForIt'] = 'cubic-bezier(1,.02,1,-0.16)';
}
ls.options.slideEaseFunction = 'waitForIt';
});
As you can also see in the code example above, the method of changing the current easing method is ls.options.slideEaseFunction = 'easingMethodNameHere';