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”