Liquid Slider Examples

Download Page

Below is a collection of demos mainly used for visual testing. I've included the code for your convenience. I'll try to add more over time, but feel free to contact me if you have a clever idea you want to see included. To view the responsivness, simply resize your browser.

How To Install#

Copy the files to your working directory, then add this to the <head> or the <footer>:

/* Add this to the <head> */
<link rel="stylesheet" href="./css/animate.css"> <!-- Optional -->
<link rel="stylesheet" href="./css/liquid-slider.css">

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

Then in your code, build a three-panel slider like this:

<div class="liquid-slider" id="slider-id">
     <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>

Default Settings#

These are the default settings

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Slide 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Slide 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Slide 4

$('#slider-id').liquidSlider();

How to edit settings #

Changing a setting is easy. The following disables continuous sliding and changes the default easing.

Slide 1

Slide 2

Slide 3

Slide 4

$('#slider-2').liquidSlider({
  continuous:false,
  slideEaseFunction: "easeInOutCubic"
});

Autoplay & Transition Controls#

The play button will dynamically update to stop when clicked. The controls use the internal API to control speed and delay. Note that these HTML5 sliders will not work in all browsers (specifically Firefox and IE), but can be functional using a polyfill. See here for the latest info about that.

Slide 1

Slide 2

Slide 3

Slide 4

Speed: Delay:

First, create a button and two sliders like this:

<button class="btn">A Pure Button</button>
<input id="range-speed" type=range step=100 min=-5000 max=100 value=-1500>
<input id="range-delay" type=range step=1000 min=-15000 max=100 value=-7000>

Next, initialize the Liquid Slider, access the internal api, and add a function to control the auto play. Then update the variable settings. Optionally, you may set autoSlide to true and change "Stop" and "Start" accordingly.

$('#slider-3').liquidSlider({/*autoSlide:true*/});
$('.btn').on('click', function() {
  var api = $.data( $('#slider-3')[0], 'liquidSlider'),
      text = $(this).text() === 'Start' ? 'Stop' : 'Start';
  if (text === 'Stop')
    api.startAutoSlide();
  else
    api.stopAutoSlide();
  $(this).text(text);
});
$('#range-speed').change(function() {
  api.options.slideEaseDuration = -$(this).val()
});
$('#range-delay').change(function() {
  api.options.autoSlideInterval = -$(this).val()
});

Advanced Controls. #

Hash linking allows you to link to the slider from an external page, and have a specific panel appear (Look in the URL). Cross links control the slider from anywhere on the page, even from within the slider itself.

This slider should load on panel 2 if no hash tag is supplied because of firstPanelToLoad:2. I disabled hash linking for this page so that I can link to specific sections of this page. Click to enable.

Slide 1

Slide 2

Go to slide 4

Slide 3

Slide 4

Go to slide 2

Cross Links

Use the API to manually control the slider from an external source.

slide 1 slide 3 left right

To use the API, use the following javacript. Note that the API is 0-based, so 3 will go to panel 4.

var api2 = $.data( $('#slider-4')[0], 'liquidSlider');

Use api2.setNextPanel(2) to move the slider to various positions and api2.updateClass($(this)) to update the current class. Note that instead of $(this) you may also use a class.

<a href="#" onclick="api2.setNextPanel(0);api2.updateClass($(this))">slide 1</a>
<a href="#slide-3" onclick="api2.setNextPanel(2);api2.updateClass($(this))">slide 3</a>
<a href="#left" onclick="api2.setNextPanel('left');api2.updateClass($(this))">left</a>
<a href="#right" onclick="api2.setNextPanel('right');api2.updateClass($(this))">right</a>

Hooks #

There are four functions that you can hook into. Once right before the slider removes the preloader (preload), once the slider fully loads (onload), at the start of a transition (pretransition), and once a transition completes (callback).

Slide 1

Slide 2

Slide 3

Slide 4

No, the slider isn't broken :) You can run a code that fires right before the preloader is removed. But you must run this.finalize(); if you edit this. Click below to complete the loading.

Sliding...

After clicking, you will notice tha another event fires, which is the onload function.

The pretransition function fires as soon as a transition begins. in this case I set a top bar to slide down. Then finally the callback function executes after a transition is complete. This one slides up the top bar and sets random colors to the navigation tabs.

Additionally, the pretransition function must include this.transition(); if you plan to edit this setting. Otherwise it won't complete the transition. Note that you may also pause the slider at this point.

$('#slider-5').liquidSlider({
  preloader:true,
  preload: function() {
    var self = this;
    $('.btn-load').on('click', function () {
      self.finalize();
    });
  },
  onload: function () {
    $('.btn-load').after('<button>onload complete!</button>').fadeOut();
  },
  pretransition: function() {
    $('.top-bar').text(this.getFromPanel(this.options.panelTitleSelector, this.nextPanel));
    $('.top-bar').css('top', '0');
    this.transition();
  },
  callback: function() {
     $('.top-bar').css('top', '-100px');
     $('#slider-5-nav-ul a').each(function() {
      // http://www.paulirish.com/2009/random-hex-color-code-snippets/
      $(this).css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
      $(this).css('color', '#'+Math.floor(Math.random()*16777215).toString(16));
     })
  },
})

Onward to Page 2