@@ -1,162 +1,154 @@
-[Liquid Slider 2 ](http://liquidslider.com)
-============
-A Responsive jQuery HTML Content Slider
+# Liquid Slider
-[ Download ](https://github.com/KevinBatdorf/liquidslider/zipball/master)
+## A Responsive jQuery HTML Content Slider
-[Custom Build ](http ://liquidslider .com/custom-build )
+[Download ](https ://github .com/KevinBatdorf/liquidslider/zipball/master )
[Demo Page ](http://kevinbatdorf.github.io/liquidslider)
I'm on Twitter: [@Kevin Batdorf ](http://twitter.com/#!/kevinbatdorf)
-
-Features
---------
-Unbelievably easy to use.
-Custom build can yeild Less than 5kb (gzipped)
-Full build just under 6kb (gzipped)
-Integrates with Animate.css
-Powerful API
-
How to Use
-----------
-See [here ](http://kevinbatdorf.github.io/liquidslider) for further details and examples.
+1. Download the files to your working directory.
+2. Link files in the header and footer.
+3. Structure your html in a manner similar to below:
-Add the CSS to the `<head>` and optionally add animate.css as well.
+```html
+<head >
+ <link rel =" stylesheet" href =" ./dist/css/liquid-slider.css"
+</head >
-```markup
-<link rel="stylesheet" href="./css/liquid-slider.css">
-<link rel="stylesheet" href="../css/animate.css">
-```
-Install the javascripts in the head or footer after jQuery and other scripts. Note that if you install in the footer, you can omit the `$(function() {});` wrap.
+<section class =" liquid-slider" id =" main-slider"
+ <div >
+ <h2 class =" title" h2 >
+ <p >Content</p >
+ </div >
+ <div >
+ <h2 class =" title" h2 >
+ <p >Content</p >
+ </div >
+</section >
-```markup
-<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>
+<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 >
```
-and.. .
+4. Initialize the content slider somewhere after the script .
```javascript
$ (function (){
- $ (' #slider-id ' liquidSlider ();
+ $ (' #main-slider ' liquidSlider ();
});
```
-The id (slider-id) should match the id of the content, as follows :
+If you would like to edit a setting, do so like this :
-```html
-<div class =" liquid-slider" id =" slider-id"
- <section >
- <h2 class =" title" h2 >
- <p >Content</p >
- </section >
- <section >
- <h2 class =" title" 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:
-```html
-<section >
- <h2 class =" title" h2 >
- <p >Content</p >
-</section >
+```javascript
+$ (function (){
+ $ (' #main-slider' liquidSlider ({
+ setting: value,
+ setting: value
+ });
+});
```
Default Settings
----------------
-Default settings vary on custom builds
```javascript
- autoHeight: true ,
- minHeight: 0 ,
- heightEaseDuration: 1000 ,
- heightEaseFunction: " easeInOutExpo"
-
- slideEaseDuration: 1000 ,
- slideEaseFunction: " easeInOutExpo"
- slideEaseFunctionFallback: " easeInOutExpo"
- animateIn: " bounceInRight"
- animateOut: " bounceOutRight"
- continuous: true ,
- fadeInDuration: 500 ,
- fadeOutDuration: 500 ,
-
- autoSlide: false ,
- autoSlideDirection: ' right'
- autoSlideInterval: 6000 ,
- autoSlideControls: false ,
- autoSlideStartText: ' Start'
- autoSlideStopText: ' Stop'
- 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"
- firstPanelToLoad: 1 ,
- navElementTag: " div"
-
- crossLinks: false ,
- 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: 2200 ,
-
- preload : function () {
- this .finalize ();
- },
- onload : function () {},
- pretransition : function () {
- this .transition ();
- },
- callback : function () {},
-
- preloader: false ,
- swipe: true
-
+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 ,
+crossLinks: false ,
+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.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
@@ -248,7 +240,7 @@ 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.
+- 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.
0 comments on commit
b7c6d4e