Here’s a really useful script for sliders utilising css and Javascript effects.
It’s responsive slider created by Kevin Batdorf which I have found really useful.
Click the link here to download the files: Liquid Slider
And add the code below to your website to enable the slider.

This is the code for the header to enable the scripts.

/* Add these to the <head> or the <footer>*/ 
<script src=""></script> 
<script src="./js/jquery.easing.1.3.js"></script> 
<script src="./js/jquery.touchSwipe.min.js"></script> 
<script src="./js/jquery.liquid-slider.min.js"></script>

This is the function call, where #slider-id is the id of the div containing the items you wish to slide, which can be placed anywhere on the page or in a separate javascript file you have linked in (as per above).

/* If installing in the footer, you won't need $(function() {} */

And this chunk below is the framework you use to create the slide content.

<div id="slider-id" class="liquid-slider">

<h2 class="title">Slide 1</h2>
// Content goes here



<h2 class="title">Slide 2</h2>
// Content goes here


<h2 class="title">Slide 3</h2>
// Content goes here


One response to “Liquid Slider

Leave a Reply

Privacy & more..

Cookie Consent Policy