Liquid Slider with Node

To install execute with npm.

npm install @tschallacka/liquidslider

In your index.js or other place in your node.js script add:

var LiquidSlider = require('@tschallacka/liquidslider')

Liquid Slider uses a less file for it's styling. If you use less you can import it with

@import './node_modules/@tschallacka/liquidslider/src/less/liquid-slider.less';

or if you prefer the compiled css you can do

@import './node_modules/@tschallacka/liquidslider/css/liquid-slider.css';

For the legacy file instructions go to: Legacy page 1 For instructions how to use the Liquid Slider with node visit the below instructions, with page 3 going in more detail how to use it with node.

the documentation #

Hey there, thanks for choosing for the liquid slider with Node JS integration. This documentation consists of legacy and node js implementation.
If you really want to use the legacy you can do that, but I wouldn't recommend it, as it has some serious memory leaks. Page 1 and 2 on the npm documentation largely use the "old" approach via the jQuery function. Page 3 covers the added features and new ways to work with it.

quick snippets #

quick usage

let LiquidSlider = require('@tschallacka/liquidslider');
let slide = new LiquidSlider($('#snippets'));

easing

Read the documentation.

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

animate.css

Read the documentation.

let slider = new LiquidSlider($element, {
    autoHeight:true,
    slideEaseFunction:'animate.css',// Set this to indicate that animate.css functions are used
    slideEaseDuration:1000,
    heightEaseDuration:1000,
    animateIn:"rollIn", // define which animate.css functions to use
    animateOut:"rollOut"     
});

october founation

Read the documentation

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

Why the change#

I decided to upgrade liquid slider because it hasn't seen some overhaul for a long time, and I was running into out of memory errors if I left a page open that had a liquid slider for a while.
Seeing the not so active repository I decided to update it myself and offer a pull request. But as I needed these changes now I decided to publish under my own namespace in the npm repository.

If you see any bugs, need new features, don't hesitate to open an issue on the github repo

In the process I also decided to integrate it in my existing toolset to enable easier cleanup of initialized instances. And since I'm lazy I didn't rewrite anything of it so that the liquid slider can run as a standalone jquery plugin. This makes it so that you do need to include the liquid slider in your index.js and compile it with browserify or something similar to get access to the global jQuery function, which is more superfluos because you can simply directly instantiate the LiquidSlider as an object.
But if you have a certain workflow, it may be easier to keep on working the "old" way.

A bit technical#

This code has two licenses now. The MIT license for the code I wrote, and the MIT license for Kevin. You can find the licenses in the LICENSE file.
If you wish to republish, etc.. you will need to add this license file to your distributed files.

If you see any bugs, need new features, don't hesitate to open an issue on the github repo or contribute to it with a pull request.
If you do make a pull request, please also make an entry in the documentation and in the /src/js/jquery.liquidslider.npm.demo.js illustrating it in use.

This makes use of the october foundation for management of event, cleanup of variables and keeping the code clean. It uses the javascript prototype framework to make an object that can be instantiated.
Feel free to use it in your own projects if you feel so inclined.

Liquid Slider Examples with Node