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.

Animate.css#

The Liquid Slider now natively supports the popular animate.css plugin. Test it out below by selecting your animation types and moving the slider. Note that if you want to use the same transition for both entrance and exit, you must include a specific callback function (see below). You can also turn on the autoHeight setting too.

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

The following are supported. Click to activate, then use the navigation above to continue testing.

Exit Animations

Attention seekers

Flippers (currently Webkit, Firefox, & IE10 only):

Fading exits:

Bouncing exits:

Rotating exits:

Lightspeed:

Specials:

Entrance Animations

Attention seekers

Flippers (currently Webkit, Firefox, & IE10 only):

Fading entrances:

Bouncing entrances:

Rotating entrances:

Lightspeed:

Specials:

This one is easy to set up.

$('#slider-6').liquidSlider({
  autoHeight:false,
  slideEaseFunction:'animate.css',
  slideEaseDuration:1000,
  heightEaseDuration:1000,
  animateIn:"rotateInUpRight",
  animateOut:"rotateOutUpLeft",
  callback: function() {
    var self = this;
    $('.slider-6-panel').each(function() {
      $(this).removeClass('animated ' + self.options.animateIn);
    });
  }
});

To disable the Auto Height on the fly like I did above, you simply jump into the api, disable the setting, then recalculate the height. Without height animation the slider is set to use the heighest panel height.

$('.height-toggle').on('click', function(e) {
  var api = $.data( $('#slider-6')[0], 'liquidSlider');
  if ($(this).text() === "turn off") {
    api.options.autoHeight = false;
    $(this).text('turn on');
    api.adjustHeight(false, api.getHeighestPanel());
  } else {
    api.options.autoHeight = true;
    $(this).text('turn off');
    api.adjustHeight(false, api.getHeight());
  }
  e.preventDefault();
});

Ajax#

This section actually has very little to do with Ajax, but when people ask me how to use the slider with Ajax, I know they are really asking how they can reconfigure the height after the content has loaded in. To take it one step further, I'll show you how you can easily use the built in preloader function as well!

Form

Slider Settings

$('#slider-7').liquidSlider({
  includeTitle:false,
  slideEaseFunction:'animate.css',
  slideEaseDuration:1000,
  heightEaseDuration:1000,
  animateIn:"fadeIn",
  animateOut:"bounceOutRight"
});

AJAX Logic

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

$('.ajax1').on('click', function(e) {
  e.preventDefault();
  api2.addPreloader();
  $('.ajax-container').html('');
  $.ajax({
    type: "GET",
    url: "",
    dataType: "jsonp",
    success: function() {},
    error: function() {},
    complete: function() {
      $('.ajax-container').html('<p>This JSON request was faked...</p>' + $('.profile').html());
      api2.adjustHeight(true, api2.getHeight());
      api2.removePreloader();
    }
  });

I know I fooled you there a bit, but there's no sense in actually running an ajax request here. You can find those tutorials elsewhere. However, if you skip over to the AJAX Logic tab above I will walk you through the code.

Actually, it should be very easy to follow. Line 1 stores the slider in an object that lets us access the public functions. Then after the button is clicked, we prevent the form submission, add the preloader, delete the form, and make the ajax request. Here you would set up situations that run on success or error, then once completed you would adjust the height and finally remove the preloader. It's too simple, right?

Alternative Navigation#

Using the select box on mobile devices provides a native experience that makes sense to the user and is hard to confuse. However, there are times when an alternative mobile navigation makes more sense. Here I will show you one popular alternative.

Home

Inbox

Album

Sign Out

This is also very easy to set up and involves a few simple settings and some css media queries. Additionally, you may need to realign the navigation in some cases where the content width is unknown until later on (i.e. images, fonts, etc).

$('#slider-8').liquidSlider({
  includeTitle:false,
  mobileNavigation:false,
  onload: function() {
    this.alignNavigation();
  }
});

Here I have removed the title, disabled the mobile navigation, and told the slider to recalculate the alignment of the navigation after being loaded. The last part is only necessary if your navigation looks split in half and drops down to a second line.

<!-- html -->
<h2 class="title">
  <i class="icon-inbox"></i>
  <span>Inbox</span>
</h2>
/*css*/
@media (max-width: 550px) {
  #slider-8-nav-ul {
    font-size:2em;width:100%}
  #slider-8-nav-ul span {
    display:none;}
  #slider-8-nav-ul li {
    display:block;width:25%;float:left}
  #slider-8-nav-ul a {
    box-sizing:border-box;width:100%;text-align:center}
  }

I included both the html I used within a panel and the css media query, which you would include in the head of your document. There isn't a lot of advanced wizardry happening here, but there are two important things to note.

This might not be the best media query to use as it's not mobile-first in design. I included it for ease, but you might want to set these styles in your base css, then use a "min-width" media query to override them on larger screens. @media queries only load if they are needed, and the less you load on mobile devices, the better. If you only have a few lines then the footprint is small and don't worry about it, but if you're building a full site then that approach is a must.
The box-sixing:border-box propery basically tells an element that it will be the width stated, and not increase due to padding, etc. It's an amazing thing, but unfortunately, be sure to check browser support if you plan to use it as you might need vendor prefixes or a polyfill.