Liquid Slider

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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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() {} */
$(function(){
     $('#slider-id').liquidSlider();
});

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

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

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

</div>

<div>

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

</div>
<div>

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

</div>
</div>

One response to “Liquid Slider

Leave a Reply