Please visit: http://meandmax.github.io/lory/
Touch enabled minimalistic slider written in vanilla JavaScript.
npm install --save lory.js
var lory = require('lory');
bower install lory --save
// To install dev dependencies run:
npm install -g grunt-cli
npm install
// To start the development server run:
grunt start
// To lint your code run:
grunt lint
// To make a full new build run:
grunt build
<div class="slider js_simple simple">
<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>
</ul>
</div>
</div>
.frame {
position: relative;
font-size: 0;
line-height: 0;
overflow: hidden;
white-space: nowrap;
}
.slides {
display: inline-block;
}
li {
position: relative;
display: inline-block;
}
<script src="js/lory.min.js"></script>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function() {
var simple = document.querySelector('.js_simple');
lory(simple, {
// options going here
});
});
</script>
<script src="js/jquery.lory.min.js"></script>
<script>
'use strict';
$(function() {
$('.js_simple').lory({
infinite: 1
});
});
</script>
<script src="js/lory.js"></script>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
lory(element, {});
});
});
</script>
Copyright © 2015 Maximilian Heinz, contributors. Released under the MIT, GPL licenses
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.