Permalink
Browse files

optimized default transistions, add public api to documentation, udpa…

…te demo sliders
  • Loading branch information...
1 parent dc41fdd commit d84eeb550162ee77a30d877be9f07f4d7e44b6b6 Maximilian Heinz committed Mar 21, 2015
Showing with 175 additions and 187 deletions.
  1. +13 −12 LICENSE
  2. +29 −10 README.md
  3. +3 −2 demo/app.css
  4. +51 −63 demo/index.html
  5. +8 −11 demo/js/lory.js
  6. +1 −1 demo/js/lory.min.js
  7. +8 −11 dist/lory.js
  8. +1 −1 dist/lory.min.js
  9. +53 −65 index.html
  10. +8 −11 src/lory.js
View
@@ -1,20 +1,21 @@
The MIT License (MIT)
-Copyright (c) 2015 Maximilian Heinz
+Copyright (c) 2015 Maximilian Heinz <info@maximilian-heinz.de> (https://twitter.com/_meandmax_)
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
View
@@ -14,24 +14,22 @@ Please visit: <a href="http://meandmax.github.io/lory/" target="_blank">http://m
[![code climate](http://img.shields.io/codeclimate/github/meandmax/lory.svg?style=flat)](https://codeclimate.com/github/meandmax/lory)
[![devDependencies](http://img.shields.io/david/dev/meandmax/lory.svg?style=flat)](https://david-dm.org/meandmax/lory#info=devDependencies&view=table)
-##Install with node
+## Install with node
-```
+```javascript
npm install --save lory
-```
-```javascript
var lory = require('lory');
```
-##Install with bower
+## Install with bower
```
bower install lory --save
```
-##Prerequisited markup
+## Prerequisited markup
```html
<div class="slider js_simple simple">
@@ -48,7 +46,7 @@ bower install lory --save
</div>
```
-##Prerequisited css
+## Prerequisited css
```css
.frame {
@@ -100,7 +98,28 @@ bower install lory --save
</script>
```
-##Options
+# Public API
+
+<table>
+ <tr>
+ <th>prev:</th>
+ <td>slides to the previous slide</td>
+ </tr>
+ <tr>
+ <th>next:</th>
+ <td>slides to the next slide</td>
+ </tr>
+ <tr>
+ <th>setup:</th>
+ <td>Binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.</td>
+ </tr>
+ <tr>
+ <th>reset:</th>
+ <td>sets the slider back to the starting position and resets the current index (called on Resize event)</td>
+ </tr>
+</table>
+
+## Options
<table>
<tr>
@@ -111,7 +130,7 @@ bower install lory --save
<tr>
<td>slideSpeed</td>
<td>time in milliseconds for the animation of a valid slide attempt</td>
- <td>default: 400</td>
+ <td>default: 300</td>
</tr>
<tr>
<td>rewindSpeed</td>
@@ -135,7 +154,7 @@ bower install lory --save
</tr>
</table>
-##Callbacks
+## Callbacks
<table>
<tr>
View
@@ -114,12 +114,12 @@ tr {
margin-bottom: 20px;
}
-.examples, .options, .api, .multiplesliders {
+.examples, .options, .api, .hooks, .multiplesliders {
margin: 20px 0;
padding: 20px 0;
}
-.examples, .api {
+.examples, .hooks, .api {
background: #ececec;
}
@@ -138,6 +138,7 @@ th {
footer {
margin: 20px auto;
+ padding: 0 20px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
text-align: center;
View
@@ -3,7 +3,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>lory.js</title>
- <meta name="description" content="">
+ <meta name="description" content="slider, carousel, infinite, swipe, touch">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./app.css" />
<link rel="stylesheet" type="text/css" href="./vendor/railscasts.css" />
@@ -24,7 +24,7 @@
<section class="examples">
<div class="examplecode">
- <h2>Required Html</h2>
+ <h2>Prerequisited Html</h2>
<pre><code class="html">
&lt;div class=&quot;slider js_simple simple&quot;&gt;
@@ -42,7 +42,7 @@
</code></pre></div>
<div class="examplecode">
- <h2>Required CSS styles</h2>
+ <h2>Prerequisted CSS styles</h2>
<pre><code class="css">
.frame {
@@ -87,7 +87,7 @@
</div>
<div class="examplecode"><pre><code class="javascript">
- document.addEventListener('DOMContentLoaded', function() {
+ document.addEventListener('DOMContentLoaded', function () {
var simple = document.querySelector('.js_simple');
lory(simple, {
@@ -105,11 +105,11 @@
<li class="js_slide" style="width: 220px;">220</li>
<li class="js_slide" style="width: 190px;">190</li>
<li class="js_slide" style="width: 150px;">150</li>
- <li class="js_slide" style="width: 90px;">90</li>
+ <li class="js_slide" style="width: 130px;">130</li>
<li class="js_slide" style="width: 250px;">250</li>
- <li class="js_slide" style="width: 60px;">60</li>
+ <li class="js_slide" style="width: 180px;">180</li>
<li class="js_slide" style="width: 200px;">200</li>
- <li class="js_slide" style="width: 50px;">50</li>
+ <li class="js_slide" style="width: 140px;">140</li>
<li class="js_slide" style="width: 120px;">120</li>
<li class="js_slide" style="width: 240px;">240</li>
</ul>
@@ -125,7 +125,7 @@
</div>
<div class="examplecode"><pre><code class="javascript">
- document.addEventListener('DOMContentLoaded', function() {
+ document.addEventListener('DOMContentLoaded', function () {
var variableWidth = document.querySelector('.js_variablewlidth');
lory(variableWidth, {
@@ -135,43 +135,6 @@
</code></pre></div>
- <h2>Multiple visible slides</h2>
-
- <div class="slider js_multipleelements multipleelements">
- <div class="frame js_frame">
- <ul class="slides js_slides">
- <li class="js_slide">1</li>
- <li class="js_slide">2</li>
- <li class="js_slide">3</li>
- <li class="js_slide">4</li>
- <li class="js_slide">5</li>
- <li class="js_slide">6</li>
- <li class="js_slide">7</li>
- <li class="js_slide">8</li>
- <li class="js_slide">9</li>
- <li class="js_slide">10</li>
- <li class="js_slide">11</li>
- <li class="js_slide">12</li>
- </ul>
- </div>
-
- <span class="js_prev prev">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
- </span>
-
- <span class="js_next next">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
- </span>
- </div>
-
-<div class="examplecode"><pre><code class="javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var multipleElements = document.querySelector('.js_multipleelements');
- lory(multipleElements, {});
- });
-
-</code></pre></div>
-
<h2>Multiple slides to scroll</h2>
<div class="slider js_multislides multislides">
@@ -202,7 +165,7 @@
</div>
<div class="examplecode"><pre><code class="javascript">
- document.addEventListener('DOMContentLoaded', function() {
+ document.addEventListener('DOMContentLoaded', function () {
var multiSlides = document.querySelector('.js_multislides');
lory(multiSlides, {
@@ -243,7 +206,7 @@
</div>
<div class="examplecode"><pre><code class="javascript">
- document.addEventListener('DOMContentLoaded', function() {
+ document.addEventListener('DOMContentLoaded', function () {
var ease = document.querySelector('.js_ease');
// http://easings.net/
@@ -252,7 +215,7 @@
infinite: 4,
slidesToScroll: 4,
slideSpeed: 1000,
- ease: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+ ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
});
});
@@ -266,7 +229,7 @@
<div class="examplecode"><pre><code class="javascript">
'use strict';
- document.addEventListener('DOMContentLoaded', function() {
+ document.addEventListener('DOMContentLoaded', function () {
Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
lory(element, {});
});
@@ -275,6 +238,29 @@
</code></pre></div>
</section>
+ <section class="api">
+ <h2>Public API</h2>
+ <table>
+ <tr>
+ <th>prev:</th>
+ <td>slides to the previous slide</td>
+ </tr>
+ <tr>
+ <th>next:</th>
+ <td>slides to the next slide</td>
+ </tr>
+ <tr>
+ <th>setup:</th>
+ <td>Binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation)</td>
+ <td>Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.</td>
+ </tr>
+ <tr>
+ <th>reset:</th>
+ <td>sets the slider back to the starting position and resets the current index (called on Resize event)</td>
+ </tr>
+ </table>
+ </section>
+
<section class="options">
<h2>Options</h2>
<table>
@@ -284,9 +270,19 @@
<td>default: 1</td>
</tr>
<tr>
+ <th>infinite</th>
+ <td>like carousel, works with multiple slides. (do not combine with rewind)</td>
+ <td>default: false (number of visible slides)</td>
+ </tr>
+ <tr>
+ <th>rewind</th>
+ <td>if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite)</td>
+ <td>default: false</td>
+ </tr>
+ <tr>
<th>slideSpeed</th>
<td>time in milliseconds for the animation of a valid slide attempt</td>
- <td>default: 400</td>
+ <td>default: 300</td>
</tr>
<tr>
<th>rewindSpeed</th>
@@ -301,17 +297,12 @@
<tr>
<th>ease</th>
<td>cubic bezier easing functions: http://easings.net/de</td>
- <td>default: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'</td>
- </tr>
- <tr>
- <th>rewind</th>
- <td>if slider reached the last slide, with next click the slider goes back to the startindex.</td>
- <td>default: false</td>
+ <td>default: 'ease'</td>
</tr>
</table>
</section>
- <section class="api">
+ <section class="hooks">
<h2>Callbacks</h2>
<table>
<tr>
@@ -354,10 +345,9 @@
<script>
'use strict';
- document.addEventListener('DOMContentLoaded', function() {
+ document.addEventListener('DOMContentLoaded', function () {
var simple = document.querySelector('.js_simple');
var variableWidth = document.querySelector('.js_variablewidth');
- var multipleElements = document.querySelector('.js_multipleelements');
var multiSlides = document.querySelector('.js_multislides');
var ease = document.querySelector('.js_ease');
@@ -369,8 +359,6 @@
rewind: true
});
- lory(multipleElements, {});
-
lory(multiSlides, {
infinite: 4,
slidesToScroll: 4
@@ -379,8 +367,8 @@
lory(ease, {
infinite: 4,
slidesToScroll: 4,
- slideSpeed: 1000,
- ease: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+ slideSpeed: 300,
+ ease: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
});
});
</script>
Oops, something went wrong.

0 comments on commit d84eeb5

Please sign in to comment.