Skip to content

Instantly share code, notes, and snippets.

@andreascarpello

andreascarpello/demo.html

Last active August 29, 2015 14:16
Show Gist options
  • Save andreascarpello/ecdd99e24709f7f174be to your computer and use it in GitHub Desktop.
Save andreascarpello/ecdd99e24709f7f174be to your computer and use it in GitHub Desktop.
Download ZIP
SliderJS
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
}
ul, li{
margin: 0;
padding: 0;
}
li{
display: block;
}
#slider{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#slider img{
position: absolute;
}
#slider li{
display: block;
opacity: 0;
}
#slider li.active{
display: block;
}
#slider img.landscape{
width: 100%;
height: auto;
}
#slider img.portrait{
width: auto;
height: 100%;
}
</style>
<script type="text/javascript" src="sliderjs.0.0.9.js"></script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="http://lorempixel.com/g/1600/1050/city/1" /></li>
<li><img src="http://lorempixel.com/g/1600/1050/city/2" /></li>
<li><img src="http://lorempixel.com/g/1600/1050/city/3" /></li>
<li><img src="http://lorempixel.com/g/1600/1050/city/4" /></li>
</ul>
</div>
<script>
window.onload = function() {
// Create a new instance of object
var artSliders = new sliderJS({
containerID: 'slider', // Container
children: 'li', // Items Tag
activeClassName: 'active', // Css class for active items
portraitClassName: 'portrait',
landscapeClassName: 'landscape',
effects: [{
fadeIn: {
duration: 1000,
complete: function(){}
},
fadeOut: {
duration: 1000,
complete: function(){}
}
}],
duration: 3000 // Timer
});
}
</script>
</body>
</html>
Raw
sliderjs.0.0.9.js
function sliderJS( options ){
// Define default value
options.container = options.container || 'slider', // Container ID
options.children = options.children || 'li', // Items Tag
options.activeClassName = options.activeClassName || 'active', // Css class for current active item
options.portraitClassName = options.portraitClassName || 'portrait',
options.landscapeClassName = options.landscapeClassName || 'landscape',
options.effects[ 0 ].fadeIn.duration = options.effects[ 0 ].fadeIn.duration || null,
options.effects[ 0 ].fadeIn.complete = options.effects[ 0 ].fadeIn.complete || null,
options.effects[ 0 ].fadeOut.duration = options.effects[ 0 ].fadeOut.duration || null,
options.effects[ 0 ].fadeOut.complete = options.effects[ 0 ].fadeOut.complete || null,
options.duration = options.duration || 3000; // Timer
var getItems = {
container: function(){
return document.getElementById( options.container );
},
children: function(){
return this.container().getElementsByTagName( options.children );
},
image: function( i ){
return this.children()[ i ].getElementsByTagName( 'img' )[ 0 ];
},
imageHeight: function( i ){
return this.image( i ).height;
},
imageWidth: function( i ){
return this.image( i ).width;
},
imageRatio: function( i ){
return this.imageWidth( i ) / this.imageHeight( i );
},
imageCount: function(){
return this.children().length;
}
},
getWindow = {
height: function(){
return document.documentElement.clientHeight;
},
width: function(){
return document.documentElement.clientWidth;
},
ratio: function(){
return this.width() / this.height();
}
},
effects = {
easing: {
linear: function( progress ) {
return progress;
},
quadratic: function( progress ) {
return Math.pow( progress, 2 );
},
swing: function( progress ) {
return 0.5 - Math.cos( progress * Math.PI ) / 2;
},
circ: function( progress ) {
return 1 - Math.sin( Math.acos( progress ));
},
back: function( progress, x ) {
return Math.pow( progress, 2 ) * ( ( x + 1 ) * progress - x );
},
bounce: function( progress ) {
for ( var a = 0, b = 1, result; 1; a += b, b /= 2 ) {
if ( progress >= ( 7 - 4 * a ) / 11 ) {
return -Math.pow( ( 11 - 6 * a - 11 * progress ) / 4, 2 ) + Math.pow( b, 2 );
}
}
},
elastic: function( progress, x ) {
return Math.pow( 2, 10 * ( progress - 1 ) ) * Math.cos( 20 * Math.PI * x / 3 * progress );
}
},
animate: function( options ) {
var start = new Date();
var id = setInterval( function() {
var timePassed = new Date() - start;
var progress = timePassed / options.duration;
if ( progress > 1 ) {
progress = 1;
}
options.progress = progress;
var delta = options.delta( progress );
options.step( delta );
if ( progress === 1 ) {
clearInterval( id );
if ( options.complete ){
options.complete();
}
}
}, options.delay || 10 );
},
fadeOut: function( element, options ) {
var to = 1;
this.animate({
duration: options.duration,
delta: function( progress ) {
progress = this.progress;
return effects.easing.swing(progress);
},
complete: options.complete,
step: function( delta ) {
element.style.opacity = to - delta;
}
});
},
fadeIn: function( element, options ) {
var to = 0;
this.animate({
duration: options.duration,
delta: function( progress ) {
progress = this.progress;
return effects.easing.swing(progress);
},
complete: options.complete,
step: function( delta ) {
element.style.opacity = to + delta;
}
});
}
},
resize = {
cover: function(){
var orientation,
i = 0;
for( var i = 0; i < getItems.imageCount(); i++ ){
var image = getItems.image( i );
if ( getWindow.ratio() < getItems.imageRatio( i ) ) {
image.className = options.portraitClassName;
image.style.cssText = 'margin-left: -' + getItems.imageWidth( i ) / 2 + 'px; margin-top: 0; top: 0; left: 50%;';
orientation = options.portraitClassName;
} else {
image.className = options.landscapeClassName;
image.style.cssText = 'margin-left: 0; margin-top: -' + getItems.imageHeight( i ) / 2 + 'px; top: 50%; left: 0;';
orientation = options.landscapeClassName;
}
}
}
},
loopElements = function(){
var i = 0,
first = true,
loop = function(){
getItems.children()[ i ].className += ' ' + options.activeClassName;
if( options.effects[ 0 ].fadeIn ){
effects.fadeIn( getItems.children()[ i ], {
duration: options.effects[ 0 ].fadeIn.duration,
complete: options.effects[ 0 ].fadeIn.complete
});
}
if( !first ){
var c = ( i === 0 ) ? getItems.imageCount() - 1 : i - 1;
getItems.children()[ c ].className = getItems.children()[ c ].className.replace( ' ' + options.activeClassName, '' );
if( options.effects[ 0 ].fadeOut ){
effects.fadeOut( getItems.children()[ c ], {
duration: options.effects[ 0 ].fadeOut.duration,
complete: options.effects[ 0 ].fadeOut.complete
});
}
}
i++;
if ( i === getItems.imageCount() ) { i = 0; }
resize.cover();
first = false;
},
interval = setInterval( loop, options.duration || 2000 );
loop();
},
init = function(){
if ( !window.addEventListener ) {
window.attachEvent( 'resize', resize.cover, false );
} else {
window.addEventListener( 'resize', resize.cover, false );
}
loopElements();
};
init(); // Start
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment