Liquid Slider Examples with Node

Download Page

Below is a collection of demos mainly used for visual testing. To view the responsiveness, simply resize your browser.
Got ideas what to add? Leave a feature request at the github repo.

Animate.css#

For default transitions there are several easing functions programmed you can find on page 3 of this manual.

Liquid Slider 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

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.

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.

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

My favorite thing is...

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

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.

Inbox

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.

Album

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

Sign Out

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.

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.

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-wrapper .ls-nav ul {
      font-size: 2em;
      width:100%;
    }
    .slider-8-wrapper .ls-nav ul span {
      display:none;
    }
    .slider-8-wrapper .ls-nav ul li {
      display: block;
      width: 25%;
      float: left;
    }
    .slider-8-wrapper .ls-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.


Onward to Page 3