Liquid Slider

A Responsive jQuery HTML Content Slider

Download

Live Examples

Features

Fully Responsive to Screen Widths
Updates Height After Page Loads
Available Functions to Adjust Height After AJAX Load
CSS3 Transitions for Mobile Devices
Dynamic Mobile Style Navigation (Select Box)
Hide Arrows on Mobile

Dynamic Tabs & Arrows
Callback Functions After Panel Slide
Dynamic Preloader Per Panel (per panel not available when mobile)
Pause on Hover
Hide First and Last Arrows Conditionally

Auto Play Controls
Keyboard Navigation

Continuous Sliding (not on mobile)
Cross Linking

How to Use

See here for further details.

Install the slider in the head after jQuery.

    <link rel="stylesheet" type="text/css" media="screen" href="./stylesheets/liquid-slider-1.1.css">
    <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>  
    $(function(){
      $('#slider-id').liquidSlider();
    });

Where the slider-id matches the id of the content, as follows:

      <div class="liquid-slider"  id="slider-id">
          <section>
            <h2 class="title">Panel 1</h2>
            <p>Content</p>
          </section>
          <section>
            <h2 class="title">Panel 2</h2>
            <p>Content</p>
          </section>
      </div>

Add as many panels as you like within the <div class="liquid-slider id="slider-id"></div>

One Panel:

    <section>
      <h2 class="title">Panel</h2>
      <p>Content</p>
    </section>

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: "« left",
       dynamicArrowRightText: "right »",
              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

Documentation

Documentation is here

Submit bugs here

Maintained by Kevin Batdorf