Responsive jQuery Content slider with HTML5 - Liquid Slider

Responsive jQuery Content slider with HTML5 - Liquid Slider

Liquid Slider is a jQuery Slider Plugin with HTML5 that allows you to create a full Responsive content slider for both web and mobile devices.

You might also like:

How to use it:

1. Include jQuery Library and jquery.liquid-slider.js

<script src="./js/jquery-1.8.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/jquery.liquid-slider-1.1.min.js"></script>

2. Call the plugin

  /* Here is the slider using default settings */
  /* If you want to adjust the settings, you set an option
 as follows:
  /* If you need to access the internal property or methods, use this method.
  var sliderObject = $.data( $('#slider-id')[0], 'liquidSlider');

3. Markup

<div class="liquid-slider"  id="slider-id">
<h2 class="title">Panel 1</h2>
<h2 class="title">Panel 2</h2>
<h2 class="title">Panel 3</h2>
<h2 class="title">Panel 4</h2>

4. Default Settings

autoHeight: true,
               autoHeightMin: 0,
      autoHeightEaseDuration: 1500,
      autoHeightEaseFunction: "easeInOutExpo",
           slideEaseDuration: 1500,
           slideEaseFunction: "easeInOutExpo",
         callforwardFunction: null,
            callbackFunction: null,
                   autoSlide: false,
         autoSliderDirection: 'right',
           autoSlideInterval: 7000,
           autoSlideControls: false,
          autoSlideStartText: 'Start',
           autoSlideStopText: 'Stop',
    autoSlideStopWhenClicked: true,
       autoSlidePauseOnHover: true,
                  continuous: true,
               dynamicArrows: true,
      dynamicArrowsGraphical: false,
        dynamicArrowLeftText: "&#171; left",
       dynamicArrowRightText: "right &#187;",
              hideSideArrows: false,
      hideSideArrowsDuration: 750,
                 hoverArrows: true,
          hoverArrowDuration: 250,
                 dynamicTabs: true,
            dynamicTabsAlign: "left",
         dynamicTabsPosition: "top",
            firstPanelToLoad: 1,
          panelTitleSelector: "h2.title",
               navElementTag: "div",
                  crossLinks: false,
                 hashLinking: false,
                   hashNames: true,
              hashCrossLinks: false,
           hashTitleSelector: "h2.title",
            hashTagSeparator: '/',
                     hashTLD: '.html',
          keyboardNavigation: false,
                     leftKey: 39,
                    rightKey: 37,
                   panelKeys: {
                      1: 49,
                      2: 50,
                      3: 51,
                      4: 52
                  responsive: true,
            mobileNavigation: true,
        mobileNavDefaultText: 'Menu',
           mobileUIThreshold: 0,
        hideArrowsWhenMobile: true,
              useCSSMaxWidth: 1030,
                   preloader: true,
    preloaderFadeOutDuration: 250,
           preloaderElements: 'img,video,iframe,object'
                topScrolling: false,
        topScrollingDuration: 1500,
          topScrollingOnLoad: false,
     topScrollingExtraPixels: 0

Change Logs:


  • 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.

  • Publication date: 12.03.2018
  • Source