Responsive jQuery Content Slider - Liquid Slider

Liquid Slider is a jQuery Slider Plugin that allows you to create a fully responsive, touch-friendly content slider for both web and mobile devices.

The plugin also generates a tab navigation for the slider that enables the user to switch between slides just like the tabbed content interface.

Users are also able to navigate between slides by clicking the left/right arrows or swiping the screen (for mobile).

See also:

• 10 Best Carousel Plugins In jQuery/JavaScript/CSS

More features:

• Auto adjusts the height based on the content.
• Auto play with pause on hover.
• Keyboard navigation.
• Content preloader.

How to use it:

1. Include the necessary jQuery Library and the jQuery Liquid Slider plugin's files in the document.

<link rel="stylesheet" href="/path/to/liquid-slider.css">
<script src="/path/to/jquery.liquid-slider.min.js"></script>  
<script src="/path/to/jquery.min.js"></script>

2. Load the jQuery easing plugin for extra easing functions.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3. Load the jQuery touchSwipe plugin to enable touch events on the slider.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

4. Load the Animate.css library to animate slides with awesome CSS3 animations (OPTIONAL).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

5. The required HTML structure for the slider.

<div id="slider-example" class="liquid-slider">
  <div>
    <h2 class="title">Slide 1</h2>
    <p>Slide 1 Content</p>
  </div>
  <div>
    <h2 class="title">Slide 2</h2>
    <p>Slide 2 Content</p>
  </div>
  <div>
    <h2 class="title">Slide 3</h2>
    <p>Slide 3 Content</p>
  </div>
</div>

5. Initialize the slider with default settings.

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

6. Use Animate.css to animate slides

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

7. Optional settings to customize the slider.

$('#slider-example').liquidSlider({

  // auto adjusts the height
  autoHeight: true,

  // min height
  minHeight: 0,

  // easing effect when transitioning the height
  heightEaseDuration: 1500,
  heightEaseFunction: 'easeInOutExpo',


  // animation options
  slideEaseDuration: 1500,
  slideEaseFunction: 'easeInOutExpo',
  slideEaseFunctionFallback: 'swing',
  animateIn: 'bounceInRight',
  animateOut: 'bounceOutRight',
  continuous: true, // infinite loop
  fadeInDuration: 500,
  fadeOutDuration: 500,

  // autoplay
  autoSlide: false,

  // or 'left'
  autoSlideDirection: 'right',

  // autoplay interval
  autoSlideInterval: 6000,

  // force autoplay
  forceAutoSlide: false,

  // pause on hover
  pauseOnHover: false,

  // navigation options
  dynamicArrows: true,
  dynamicArrowsGraphical: true,
  dynamicArrowLeftText: '« left',
  dynamicArrowRightText: 'right »',
  hideSideArrows: false,
  hideSideArrowsDuration: 750,
  hoverArrows: true, // show on hover
  hoverArrowDuration: 250,

  // enable the tab navigation
  dynamicTabs: true,
  dynamicTabsHtml: true,
  includeTitle: true,
  panelTitleSelector: '.title',
  dynamicTabsAlign: 'left',
  dynamicTabsPosition: 'top',
  navElementTag: 'div',

  // specify the first slide to load
  firstPanelToLoad: 1,

  // enable hash in URL
  hashLinking: false,

  // selector
  hashTitleSelector: '.title',

  // enable keyboard navigation
  keyboardNavigation: false,
  leftKey: 39,
  rightKey: 37,
  panelKeys: {
    1: 49,
    2: 50,
    3: 51,
    4: 52
  },

  // responsive & mobile options
  responsive: true,
  mobileNavigation: true,
  mobileNavDefaultText: 'Menu',
  mobileUIThreshold: 0,
  hideArrowsWhenMobile: true,
  hideArrowsThreshold: 0,
  useCSSMaxWidth: 3000,

  // preload function
  preload: function() {
    var _this = this;
    jQuery(window).bind('load', function() {
      _this.finalize();
    });
  },

  // onLoad function
  onload: function() {},

  // pretransition function
  pretransition: function() {
    this.transition();
  },

  // callback function
  callback: function() {},

  // enable preloader
  preloader: false,

  // enable swipe events
  swipe: true,

  // touchSwipe options
  swipeArgs: undefined
  
});

8. If you need to access the internal property or methods, use this:

var api = $.data( $('#slider-example')[0], 'liquidSlider');
console.log(api);

Changelog:

2019-06-07

• Added a fix for the greedy arrows class.
• Doc & demo updated.

2018-06-22

• v2.3.12: add quick chrome fix. use percentage widths only now

2018-03-12

• fixes bug with WP

v2.3.9 (2015-08-19)

• fixes double pretransition call

v2.3.8 (2014-08-22)

• Fixes bug with text arrows and no mobile nav

v2.3.7 (2014-07-18)

• fixes compatibility with bootstrap

v2.3.5 (2014-05-21)

• Fixes trim error

v2.3.2 (2014-05-18)

• Fixes hashLinks bug

v2.3.1 (2014-05-13)

• Uses px instead of %
• Fixes hash linking (new approach)
• Uses API for cross links

v2.1.1 (2014-04-10)

• Bug fixes

v2.1.0 (2014-04-05)

• Bug fixes and improvements

v2.0.12 (2013-11-10)

• adds currentPanel class to the current panel

v2.0.9 (2013-09-07)

• Fixes a few of the problems with cross links

v2.0.8 (2013-08-25)

• Changes how fade is handled

v2.0.7 (2013-08-09)

• adds initial opacity to fade class
• fixes swipe bug

v2.0.5 (2013-08-01)

• updates Touchswipe and options

v2.0.4 (2013-07-29)

• Changes how the slider downgrades to IE

v2.0.3 (2013-07-25)

• Adds alternative navigation example
• fixes pretransition bug when using CSS transitions

---

This awesome jQuery plugin is developed by KevinBatdorf. For more Advanced Usages, please check the demo page or visit the official website.