Liquid Slider
A Responsive jQuery HTML Content Slider
Demo Page | Example Page (Advanced)
I'm on Twitter: @Kevin Batdorf
Update
I'm going to make this compatible with NPM soon, but for now there's a work around. Two issues:
- You still need to load in the dependencies on your own
- the asset files wil have to be manually moved, or overridden in your own css
Installation
NPM
npm install --save git+https://[email protected]/KevinBatdorf/liquidslider.git
then in your js file add
import 'liquidslider/js/jquery.liquid-slider.min.js'
The stylesheet is plain css, but you can load it in with sass
@import "node_modules/liquidslider/css/liquid-slider";
The manual way:
- Download the files to your working directory.
- Link files in the header and footer.
<head> <link rel="stylesheet" href="./dist/css/liquid-slider.css"> </head> <body> <footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> <script src="./dist/js/jquery.liquid-slider.min.js"></script> </footer> </body>
How to use
Structure your html in a manner similar to below:
<section class="liquid-slider" id="main-slider"> <div> <h2 class="title">Slide 1</h2> <p>Content</p> </div> <div> <h2 class="title">Slide 2</h2> <p>Content</p> </div> </section>
- Initialize the content slider somewhere after the script.
jQuery(function($) { $('#main-slider').liquidSlider(); });
If you would like to edit a setting, do so like this:
jQuery(function($) { $('#main-slider').liquidSlider({ setting: value, setting: value }); });
Default Settings
autoHeight: true, minHeight: 0, heightEaseDuration: 1500, heightEaseFunction: 'easeInOutExpo', slideEaseDuration: 1500, slideEaseFunction: 'easeInOutExpo', slideEaseFunctionFallback: 'swing', animateIn: 'bounceInRight', animateOut: 'bounceOutRight', continuous: true, fadeInDuration: 500, fadeOutDuration: 500, autoSlide: false, autoSlideDirection: 'right', autoSlideInterval: 6000, forceAutoSlide: false, pauseOnHover: false, dynamicArrows: true, dynamicArrowsGraphical: true, dynamicArrowLeftText: '« left', dynamicArrowRightText: 'right »', hideSideArrows: false, hideSideArrowsDuration: 750, hoverArrows: true, hoverArrowDuration: 250, dynamicTabs: true, dynamicTabsHtml: true, includeTitle: true, panelTitleSelector: '.title', dynamicTabsAlign: 'left', dynamicTabsPosition: 'top', navElementTag: 'div', firstPanelToLoad: 1, hashLinking: false, hashTitleSelector: '.title', 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, hideArrowsThreshold: 0, useCSSMaxWidth: 3000, preload: function() { this.finalize(); }, onload: function() {}, pretransition: function() { this.transition(); }, callback: function() {}, preloader: false, swipe: true, swipeArgs: undefined
Versions
Version 2.3.8
- Fixes bug with text arrows and no mobile nav
Version 2.3.7
- Fixes compatability with Bootstrap
Version 2.3.6
- Recalculates panel width based on container
- Minor CSS update
Version 2.3.2
- Fixes trim
Version 2.3.2
- Updates examples
- Fixes hashlink bug
Version 2.3.1
- Updates for jQuery repo
Version 2.3.0
- Adds bower
- Uses px instead of %
Version 2.2.0
- Fixes hash linking (new approach)
- Uses API for cross links
Version 2.1
- Fixes currentPanel bug
- Switches to a new (better?) modular strategy
- Switches license to MIT
- Improves coding style
- Sets focus/blur for autoslide
- Fixes class for cross links
- sanaziteNumber() -> sanitizeNumber() spelling fix
- Fixes autoSlide pauseOnHover bug
Version 2.0.12
- Adds currentPanel class to the current panel
Version 2.0.11
- Had to revert a autoslide bug fix
Version 2.0.10
- Fixes how RegEx works (hashLinking)
- Fixes a bug when dynamic arrows is disabled (@joeworkman)
- Adds a fallback for animate.css when css not supported (@joeworkman)
- Fixes autoslide bug (@joeworkman)
Version 2.0.9
- Fixes a few of the problems with cross links
Version 2.0.8
- Changes the way the slider builds with fade
Version 2.0.7
- Fixes swipe bug
Version 2.0.6
- Fixes mobile width
Version 2.0.5
- Updates touchSwipe and allows user to add options (not documented though)
Version 2.0.4
- Changes how the slider downgrades to IE
Version 2.0.3
- Fixes a bug that didn't call pretransition when using animate.css
Version 2.0.2
- Fixes a bug that loses menu names in select box when includeTitle:false
Version 2.0.1
- Fixes auto height on resize bug
Version 2.0.0
- Completely rebuilt from the ground up
- New API
- Faster, smaller, more flexible
- Many, many new features
Version 1.3.7
- Overhauls the cross linking functionality
- Removes the hashCrossLinks setting.
- Contributed by @joeworkman
Version 1.3.6
- Fixes autoslide bug and callback functionality
- Updates website on jquery repository
Version 1.3.5
- Prepares code for new site launch
- Fixes a bug when hover arrows is disabled
Version 1.3.4
- Fixes a bug when using fade transitions
- Allows crossLinks to control multiple sliders
Version 1.3.3
- Fixes an autoslide bug
Version 1.3.2
- Fixes a hashLinking bug
Version 1.3.1
- Fixes a bug when using fade and swipe
Version 1.3.0
- Fixes how the current class is applied when nesting sliders
Version 1.2.9
- Fixes and updates the TouchSwipe settings and script
Version 1.2.8
- Fixes the way the preloader works when continuous is off
Version 1.2.7
- Fixes some bugs
Version 1.2.6
- Fixes a few minor bugs.
- Organizes code for upcoming custom build
Version 1.2.4 - 1.2.5
- Pushes new version # to jQuery repository.
Version 1.2.3
- Fixes a bug when using crosslinks on multiple sliders wont apply the current class properly.
Version 1.2.2
- Fixes a bug where keyboard navigation fails.
Version 1.2.1
- Removes the depreciated $.browser() call.
- Fixes a bug when using hashNames that started the slider on the wrong panel.
Version 1.2.0
- Adapts a new semantic versioning system
- Adds touch functionality via touchSwipe (thanks @appzuka for recommending this plugin)
- Removes jQuery and included only the link to the CDN
- Replaces jQueryUI easing with the much lighter jQuery Easing plugin.