Loading...

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

<script>
/* If installing in the footer, you won't need $(function() {} */
$(function(){
     $('#slider-id').liquidSlider();
});
</script>

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>

Latest Posts

Portfolio

Contact

Fill in the form below to send us a message. Your details will not be used for promotional purposes or passed on to any third parties.

 

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close