Liquid Slider Examples with node

Download Page

The below samples show some of the ways you can use the node JS implementation to seamlessly integrate the liquid slider in your application

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.

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Slide 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Slide 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Slide 4

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

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

You're welcome?

What can I say except you're welcome.

For the sea

What can I say except

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_2

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

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slide 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna.

Slide 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Slide 4

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna.

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)'
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non auctor purus. Praesent laoreet tortor tempus lectus fringilla ultricies. Aliquam fringilla vestibulum arcu, a commodo dolor eleifend et. Suspendisse blandit aliquet lorem, sed egestas ante malesuada eget. Ut iaculis volutpat lorem, semper sagittis purus luctus sit amet. Ut sit amet feugiat mauris, eget aliquam nibh. Nulla porta tortor sed justo lobortis, ut varius sem consequat. Morbi laoreet sed arcu eget pharetra. Donec ultricies neque dui, at tincidunt massa aliquet in.
In quis faucibus sem. Quisque semper pellentesque justo, id consequat leo. Praesent non viverra diam. Pellentesque ullamcorper sem in cursus dapibus. Nam lacinia lacus ac fringilla laoreet. Fusce faucibus enim sed purus fermentum finibus. Vestibulum vitae dignissim dolor. Morbi varius tortor ut dui molestie tempor. Mauris eu viverra est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget sem interdum, placerat metus aliquet, dignissim orci. Pellentesque pulvinar mollis purus nec eleifend.
In ut ullamcorper arcu, in gravida tortor. Ut fringilla porttitor turpis, vitae tincidunt tortor convallis eu. Fusce scelerisque elit vehicula augue placerat maximus ac ut urna. Donec tincidunt vestibulum diam. Aliquam rutrum semper eros. In sem metus, euismod a velit sed, scelerisque feugiat elit. Praesent non risus efficitur, iaculis massa ut, mollis metus. Suspendisse ut fermentum est, a pharetra ex.
Morbi posuere enim pulvinar magna malesuada sagittis. Vestibulum sed metus id ante convallis commodo in sed arcu. Morbi a neque id sem tempus semper. Donec dignissim lobortis erat eu efficitur. Nunc quis justo eget nulla rutrum gravida eu in elit. Pellentesque dui metus, dapibus ac quam sed, luctus mattis leo. Integer eu lorem tristique, imperdiet nunc sit amet, scelerisque justo. Phasellus non ante eu leo semper commodo. Integer posuere nibh vitae condimentum fermentum. Nullam et tristique nunc, ac fermentum nisl. Sed sollicitudin id elit at sagittis. Maecenas tincidunt risus quis dui sollicitudin, a vehicula lectus rhoncus. Quisque porta sem pellentesque metus gravida posuere.
Curabitur dapibus a diam ut feugiat. Nullam varius ligula sit amet ante consectetur, congue venenatis mi vehicula. Vivamus mollis pretium lectus, sed fringilla lacus feugiat quis. Nam aliquet in enim ut fermentum. Praesent vitae mollis nisl, sit amet ornare lectus. Maecenas aliquet, metus ac convallis lacinia, nisl purus convallis nibh, a placerat mi tortor eget massa. Phasellus ligula augue, vulputate et orci non, finibus semper turpis. Ut in volutpat nunc. Sed elementum, mauris eget aliquam consequat, enim est efficitur augue, non porttitor nulla nisi id sem. In sit amet ullamcorper libero. Vivamus fermentum dapibus odio vitae consectetur. Donec tempor, nulla ut dapibus malesuada, quam dui dignissim diam, a pellentesque arcu lacus at justo.

In this example a new default easing was added, that can be used by any liquid slider that is instantiated after the default was set.
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';