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). Perfect for selective marketting, and more. Cross links control the slider from anywhere on the page, even from within the slider itself. You can also use the API to control the slider, which is useful when using other javascript functions or plugins.

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

The href can be a number, the title, or the direction. Note that you must use the panelTitleSelector option if you want the .currentCrossLink class to be applied. That's why the class applies to #slide-3 below but not #1.

#1 #slide-3 #left #right

Internal API

You can use the API to control the slider. Here I will set it to go to slide 4 on hover.

First, adjust the settings.

$('#slider-4').liquidSlider({
  hashLinking:true,
  crossLinks:true,
  firstPanelToLoad:2
});

Next, set up the cross links as follows.

<a href="#1" data-liquidslider-ref="slider-4">#1</a>
<a href="#slide-3" data-liquidslider-ref="slider-4">#slide-3</a>
<a href="#left" data-liquidslider-ref="slider-4">#left</a>
<a href="#right" data-liquidslider-ref="slider-4">#right</a>

Then 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');
  $('.btn-hover').on('mouseover', function() {
    api2.setNextPanel(3);
  });

In this example, I set up the button as follows.

<button class="btn-hover">Hover</button>

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). Note that this might be slow when testing offline due to Google Analytics delaying page load.

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