A Responsive jQuery HTML Content Slider
New: Now with swipe support
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
See here for further details and examples.
Install the slider in the head after jQuery and other scripts.
<link rel="stylesheet" type="text/css" media="screen" href="./css/liquid-slider.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/jquery.touchSwipe.min.js"></script>
<script src="./js/jquery.liquid-slider.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">Slide 1</h2>
<p>Content</p>
</section>
<section>
<h2 class="title">Slide 2</h2>
<p>Content</p>
</section>
</div>
Add as many slides as you like within the <div class="liquid-slider id="slider-id"></div>
One slide can be inside any element such as a section or a div:
<section>
<h2 class="title">A Slide</h2>
<p>Content</p>
</section>
Default settings vary on custom builds
autoHeight: true,
autoHeightMin: 0,
autoHeightEaseDuration: 1500,
autoHeightEaseFunction: "easeInOutExpo",
slideEaseDuration: 1500,
fadeInDuration:1000,
fadeOutDuration: 1000,
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,
hideArrowsThreshold: 481,
useCSSMaxWidth: 1030,
swipe: true
preloader: true,
preloaderFadeOutDuration: 250,
preloaderElements: 'img,video,iframe,object'
Documentation is here
Submit bugs here
Maintained by Kevin Batdorf
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 multible 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.