<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<!-- Add or remove "with-glare" class. Removing the glare makes the screen interactive -->
<div class="css-mb with-glare">
<div class="mb-display-position">
<div class="mb-display">
<div class="mb-screen-position">
<div class="mb-screen">
<!-- Image -->
<div class="container">
<div id="fadeSlider" class="sliderWrapper">
<div class="slider">
<div class="slide"><img src="http://rumart.weebly.com/files/theme/001.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/002.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/003.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/004.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/005.jpg"></div>
<div class="slide"><img src="http://rumart.weebly.com/files/theme/006.jpg"></div>
</div>
</div>
</div>
<!-- <Image -->
</div>
</div>
</div>
</div>
<div class="mb-body"></div>
<div class="mb-bottom-cover"></div>
</div>
<!-- Javascript -->
<script src="js/slider.js"></script>
<script>
var fadeSlider = new slider('#fadeSlider', {transition: {effect: 'fadeIn', easing: 'linear'}});
var sideSlider = new slider('#sideSlider');
var cornerSlider = new slider('#cornerSlider');
var horizontalSlider = new slider('#horizontalSlider', {transition: {effect: 'slideInHorizontal'}});
var verticalSlider = new slider('#verticalSlider', {transition: {effect: 'slideInVertical'}});
var pushHorizontalSlider = new slider('#pushHorizontalSlider', {transition: {effect: 'pushInHorizontal'}});
</script>
</body>
.sliderWrapper
{
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
left: 0;
right: 0;
}
.sliderWrapper .slider
{
background: #aaa;
overflow: hidden;
height: 100%;
position: relative;
width: 100%;
}
.sliderWrapper .slider .slide
{
display: none;
height: 100%;
position: absolute;
width: 100%;
}
.sliderWrapper .slider .slide img { width: 100%; height: 100%; }
.sliderWrapper .slider-directions .slider-directions-prev,
.sliderWrapper .slider-directions .slider-directions-next
{
cursor: pointer;
background: #eee;
color: #333;
height: 48px;
position: absolute;
top: 35%;
width: 24px;
z-index: 10;
box-shadow: 0;
transition-property: left,right,box-shadow;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.sliderWrapper .slider-directions .slider-directions-prev:after,
.sliderWrapper .slider-directions .slider-directions-next:after
{
content: 'O';
display: block;
line-height: 48px;
}
.sliderWrapper .slider-directions .slider-directions-prev { left: -24px; }
.sliderWrapper:hover .slider-directions .slider-directions-prev { left: 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); }
.sliderWrapper .slider-directions .slider-directions-prev:after { content: '«'; }
.sliderWrapper .slider-directions .slider-directions-next { right: -24px; }
.sliderWrapper:hover .slider-directions .slider-directions-next { right: 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); }
.sliderWrapper .slider-directions .slider-directions-next:after { content: '»'; }
.sliderWrapper .slider-navigation
{
bottom: -24px;
color: #333;
left: 2px;
position: absolute;
z-index: 10;
transition-property: bottom;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.sliderWrapper:hover .slider-navigation { bottom: 2px; }
.sliderWrapper .slider-navigation .slider-navigation-item
{
cursor: pointer;
background: #eee;
border-radius: 100%;
box-shadow: 0;
display: inline-block;
float: left;
height: 12px;
margin-left: 2px;
margin-right: 2px;
text-indent: -9999px;
width: 12px;
transition-property: box-shadow;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.sliderWrapper:hover .slider-navigation .slider-navigation-item {
box-shadow: 0 0 8px 0 rgba(0,0,0,0.8);
}
.sliderWrapper .slider-navigation .slider-navigation-item.active {
background: #333;
color: #eee;
}
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/*
Macbook material - Responsive CSS MacBook Retina Mockup by Henri Peetsmann
http://codepen.io/henripeetsmann/
*/
.css-mb {
max-width: 650px; /* Set the desired maximum width of the macbook */
min-width: 50px; /* Set the desired minimum width of the macbook */
margin: 0 auto; /* Align mockup to center */
}
.css-mb div {
box-sizing: border-box !important; /* Just in case */
}
/* Center the display */
.css-mb .mb-display-position {
width: 80%;
margin: 0 auto;
}
/* The display */
.css-mb .mb-display {
position: relative;
width: 100%;
height: 0;
padding-bottom: 65.9442%;
background: #373435;
-webkit-border-top-left-radius: 3.5% 5.3075%;
-moz-border-radius-topleft: 3.5% 5.3075%;
border-top-left-radius: 3.5% 5.3075%;
-webkit-border-top-right-radius: 3.5% 5.3075%;
-moz-border-radius-toptight: 3.5% 5.3075%;
border-top-right-radius: 3.5% 5.3075%;
}
/* Webcam */
/* Browser may not render a perfect circle */
.css-mb .mb-display:before {
content: '';
display: block;
position: absolute;
top: 3%;
left: 50%;
width: 1%;
height: 1.5164%;
margin-left: -0.5%;
border-radius: 50%;
background: #525252;
}
/* Glare */
/* Browser may not render the top and right offset evenly */
.css-mb .mb-display:after {
content: '';
display: none;
position: absolute;
right: 0.4%;
top: 0.64%;
width: 62.5%;
height: 100%;
background: none; /* Hide the gradient on older browsers */
background: -moz-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* FF3.6+ */
background: -webkit-linear-gradient(36deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* Chrome10+ and Safari5.1+ compute the degree differently */
background: -o-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* Opera 11.10+ */
background: -ms-linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%); /* IE10+ */
background: linear-gradient(55deg, rgba(0,0,0,0) 61%, rgba(255,255,255,0.05) 61%);
-webkit-border-top-right-radius: 5.3075%;
-moz-border-radius-toptight: 5.3075%;
border-top-right-radius: 5.3075%;
}
/* Only show glare, if the class is applied */
.css-mb.with-glare .mb-display:after { display: block; }
/* Position the screen and give make it the right size, ratio 16:10 */
.css-mb .mb-screen-position {
position: absolute;
top: 6.5%;
width: 93.2%;
left: 3.4%;
height: 0;
margin: 0;
padding-bottom: 58.25%; /* Ratio */
}
/* Give parent (this element) a "height", so that child elements can use height: 100%;*/
.css-mb .mb-screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #4b4b4d; /* bg color if content is not big enough, or rendering is off */
}
/* Iframe on the screen */
.css-mb .mb-screen iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Macbook body */
.css-mb .mb-body {
position: relative;
width: 100%;
height: 0;
padding-bottom: 2.3%;
background: #e6e7e8;
}
/* The groove */
.css-mb .mb-body:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 14.0740%;
height: 0;
padding-bottom: 1.4814%;
margin-left: -7.037%;
background: #a9abae;
-webkit-border-bottom-left-radius: 7.0370% 50%;
-moz-border-radius-bottomleft: 7.0370% 50%;
border-bottom-left-radius: 7.0370% 50%;
-webkit-border-bottom-right-radius: 7.0370% 50%;
-moz-border-radius-bottomtight: 7.0370% 50%;
border-bottom-right-radius: 7.0370% 50%;
}
/* Macbook bottom */
.css-mb .mb-bottom-cover {
width: 100%;
height: 0;
padding-bottom: 0.7407%;
background: #a9abae;
-webkit-border-bottom-left-radius: 12% 600%;
-moz-border-radius-bottomleft: 12% 600%;
border-bottom-left-radius: 12% 600%;
-webkit-border-bottom-right-radius: 12% 600%;
-moz-border-radius-bottomtight: 12% 600%;
border-bottom-right-radius: 12% 600%;
}
function slider(slideIdentifier, custom_options){
/**
* Available options
*/
this.options_default = {
classes: {
navigation: 'slider-navigation',
navigationItem: 'slider-navigation-item',
direction: 'slider-directions',
directionPrev: 'slider-directions-prev',
directionNext: 'slider-directions-next',
slider: 'slider',
slide: 'slide',
},
transition: {
duration: 800,
effect: 'slideInHorizontal',
easing: 'easeInOut'
},
pause: 2000,
autoRun: true,
random: false,
direction: true,
navigation: true
};
this.options = {};
/**
* Data holder for current instance, do not touch
*/
this.data = {
currentSlide: null,
lastSlide: null,
slider: null,
slides: [],
navigation: null,
animation: { run: null },
run: true,
transition: false,
cssTransitions: false
};
/**
* Constructor
* Initiate what slider container to use and setup basic data
*/
this._construct = function(slideIdentifier, custom_options){
var
self = this,
options_default = self.options_default,
options = (custom_options ? self._merge(options_default, custom_options) : options_default),
data = self.data,
sliderWrapper = document.body.querySelector(slideIdentifier),
slider = sliderWrapper.querySelector('.'+options.classes.slider),
slides = slider.querySelectorAll('.'+options.classes.slide);
// Check for transition support
var cssProperties = document.body.style;
if (
'WebkitTransition' in cssProperties
|| 'MozTransition' in cssProperties
|| 'OTransition' in cssProperties
|| 'transition' in cssProperties
) cssTransitions = true;
// If there's more than one slide
if (slides.length > 1) {
// If directions is set to be shown, add them
if (options.direction) {
var
direction = document.createElement('div'),
directionPrev = document.createElement('div'),
directionNext = document.createElement('div');
direction.setAttribute('class', options.classes.direction);
directionPrev.setAttribute('class', options.classes.directionPrev);
directionNext.setAttribute('class', options.classes.directionNext);
// Add click event for "previous"
directionPrev.addEventListener('mouseup', function(){
var newSlideID;
newSlideID = data.currentSlide-1;
if (newSlideID < 0) newSlideID = slides.length-1;
self.newSlide(newSlideID);
});
// Add click event for "next"
directionNext.addEventListener('mouseup', function(){
var newSlideID;
newSlideID = data.currentSlide+1;
if (newSlideID > slides.length-1) newSlideID = 0;
self.newSlide(newSlideID);
});
direction.appendChild(directionPrev);
direction.appendChild(directionNext);
// Append to sliderWrapper
sliderWrapper.appendChild(direction);
}
// If navigation list is set to be shown, add them
if (options.navigation) {
var navigation = document.createElement('div');
navigation.setAttribute('class', options.classes.navigation);
for (var i=0;i<slides.length;i++) {
var
navItem = document.createElement('div'),
slide = slides[i];
navItem.setAttribute('slide', i);
navItem.setAttribute('class', options.classes.navigationItem);
if (slide.getAttribute('id'))
navItem.setAttribute('class', navItem.getAttribute('class')+' '+options.classes.navigationItem+'-'+slide.getAttribute('id'));
navItem.innerHTML = (slide.getAttribute('slider-name') ? slide.getAttribute('slider-name') : i+1);
// Add click events
navItem.addEventListener('mouseup', function(e){
var navItem = e.target,
newSlideID = navItem.getAttribute('slide');
self.newSlide(newSlideID);
});
navigation.appendChild(navItem);
}
self.data.navigation = navigation.children;
// Append to sliderWrapper
sliderWrapper.appendChild(navigation);
}
} else {
options.navigation = false;
options.direction = false;
options.autoRun = false;
}
// If auto run is on, add hover events to slider, otherwise set data.run to false
if (options.autoRun){
// Add listeners to pause the slider when hovering over item
slider.addEventListener('mouseover', function(){ self.stop(); self.data.run = false; });
slider.addEventListener('mouseout', function(){ self.start(); self.data.run = true; });
}
self.options = options;
data.slider = slider;
data.slides = slides;
self._initiate();
};
/**
* Initiate slider
*/
this._initiate = function(){
var
self = this,
options = self.options,
data = self.data,
slides = data.slides;
for (var i = 0; i < slides.length; i++)
{
slides[i].style.display = 'none';
slides[i].style.zIndex = 0;
}
// Set current slide
var newSlideID = (options.random ? self.randomSlide() : 0);
self.newSlide(newSlideID, true);
// If auto run, start the slider
if (options.autoRun) self.start();
else data.run = false;
};
/**
* Start slider
*/
this.start = function(){
var
self = this,
options = self.options,
data = self.data,
slides = data.slides;
data.animation.run = setInterval(function(){
var
currentSlideID = data.currentSlide,
slideID = (options.random ? self.randomSlide() : currentSlideID+1);
if (slideID >= slides.length) slideID = 0;
self.newSlide(slideID);
}, options.pause);
};
/**
* Stop slider
*/
this.stop = function(){
var
self = this,
options = self.options,
data = self.data;
clearInterval(data.animation.run);
};
/**
* Transition to next slide with/without animation
*/
this.newSlide = function(slideID, noAnimation){
var
self = this,
options = self.options,
data = self.data,
slides = data.slides,
lastSlideID = data.lastSlide,
lastSlide = slides[lastSlideID],
currentSlideID = data.currentSlide,
currentSlide = slides[currentSlideID],
transition = options.transition.effect,
easing = options.transition.easing;
// Make sure slideID is an int
slideID = parseInt(slideID);
if (!slides[slideID]) {
console.log('Slide '+slideID+' do not exist.');
} else if (slideID == currentSlideID) {
console.log('Slide is already there.');
} else if (data.transition) {
console.log('Slider is currently running a transition. You will have to wait.');
} else {
currentSlideID = slideID;
currentSlide = slides[currentSlideID];
data.currentSlide = currentSlideID;
currentSlide.style.left = 'auto';
currentSlide.style.top = 'auto';
currentSlide.style.bottom = 'auto';
currentSlide.style.right = 'auto';
currentSlide.style.display = 'block';
currentSlide.style.zIndex = 1;
if (currentSlide.getAttribute('slider-transition')) transition = currentSlide.getAttribute('slider-transition');
if (currentSlide.getAttribute('slider-easing')) easing = currentSlide.getAttribute('slider-easing');
if (lastSlide)
{
lastSlide.style.zIndex = 0;
lastSlide.style.left = 'auto';
lastSlide.style.top = 'auto';
lastSlide.style.bottom = 'auto';
lastSlide.style.right = 'auto';
}
if (options.navigation) {
var
navCurrentSlide = data.navigation[currentSlideID],
navCurrentSlideClass = navCurrentSlide.getAttribute('class'),
navLastSlide,
navLastSlideClass;
if (lastSlide) {
navLastSlide = data.navigation[lastSlideID];
navLastSlide.setAttribute('class', navLastSlide.getAttribute('class').replace(/\s?active/, ''));
}
navCurrentSlide.setAttribute('class', navCurrentSlide.getAttribute('class')+' active');
}
// If noAnimation is not set, run transition for current slide
if (!noAnimation) {
if (self.data.run) self.stop();
var runTransition = self.transition(transition, easing);
runTransition();
if (self.data.run) self.start();
}
// Remove old slide if any when animation is done
if (lastSlide) {
setTimeout(function(){ lastSlide.style.display = 'none'; }, options.transition.duration);
}
data.lastSlide = data.currentSlide;
}
};
/*
* Get random slide ID
*/
this.randomSlide = function(){
var
self = this,
data = self.data,
slides = data.slides,
slideID = data.currentSlide;
while (slideID == data.currentSlide)
{
slideID = Math.floor(Math.random() * ((slides.length-1) - 0 + 1)) + 0;
}
return slideID;
};
this.click = function(item, e){
};
this.transition = function(transition, easing){
var
self = this,
options = self.options,
data = self.data,
slides = data.slides,
lastSlideID = data.lastSlide,
lastSlide = slides[lastSlideID],
currentSlideID = data.currentSlide,
currentSlide = slides[currentSlideID],
sliderWidth = data.slider.offsetWidth,
sliderHeight = data.slider.offsetHeight,
transition = transition || options.transition.effect,
easing = easing || options.transition.easing,
tweenFunction = self._tween(easing);
var transitions = {
fadeIn: function(){
currentSlide.style.opacity = 0;
self.animate(currentSlide, {opacity: 1});
},
slideInTop: function(){
currentSlide.style.bottom = sliderHeight+'px';
self.animate(currentSlide, {bottom: 0});
},
slideInRight: function(){
currentSlide.style.left = sliderWidth+'px';
self.animate(currentSlide, {left: 0});
},
slideInBottom: function(){
currentSlide.style.top = sliderHeight+'px';
self.animate(currentSlide, {top: 0});
},
slideInLeft: function(){
currentSlide.style.right = sliderWidth+'px';
self.animate(currentSlide, {right: 0});
},
slideInTopLeft: function(){
currentSlide.style.bottom = sliderHeight+'px';
currentSlide.style.right = sliderWidth+'px';
self.animate(currentSlide, {bottom: 0, right: 0});
},
slideInTopRight: function(){
currentSlide.style.bottom = sliderHeight+'px';
currentSlide.style.left = sliderWidth+'px';
self.animate(currentSlide, {bottom: 0, left: 0});
},
slideInBottomLeft: function(){
currentSlide.style.top = sliderHeight+'px';
currentSlide.style.right = sliderWidth+'px';
self.animate(currentSlide, {top: 0, right: 0});
},
slideInBottomRight: function(){
currentSlide.style.top = sliderHeight+'px';
currentSlide.style.left = sliderWidth+'px';
self.animate(currentSlide, {top: 0, left: 0});
},
pushInTop: function(){
currentSlide.style.bottom = sliderHeight+'px';
lastSlide.style.top = 0;
self.animate(currentSlide, {bottom: 0});
self.animate(lastSlide, {top: sliderHeight+'px'});
},
pushInRight: function(){
currentSlide.style.left = sliderWidth+'px';
lastSlide.style.right = 0;
self.animate(currentSlide, {left: 0});
self.animate(lastSlide, {right: sliderWidth+'px'});
},
pushInBottom: function(){
currentSlide.style.top = sliderHeight+'px';
lastSlide.style.bottom = 0;
self.animate(currentSlide, {top: 0});
self.animate(lastSlide, {bottom: sliderHeight+'px'});
},
pushInLeft: function(){
currentSlide.style.right = sliderWidth+'px';
lastSlide.style.left = 0;
self.animate(currentSlide, {right: 0});
self.animate(lastSlide, {left: sliderWidth+'px'});
}
};
// If special transition, set transition to correct one
// SlideIn
if (transition == 'slideInVertical') {
transition = (currentSlideID > lastSlideID ? 'slideInTop' : 'slideInBottom');
} else if (transition == 'slideInVerticalReversed') {
transition = (currentSlideID < lastSlideID ? 'slideInTop' : 'slideInBottom');
} else if (transition == 'slideInHorizontal') {
transition = (currentSlideID > lastSlideID ? 'slideInRight' : 'slideInLeft');
} else if (transition == 'slideInHorizontalReversed') {
transition = (currentSlideID < lastSlideID ? 'slideInRight' : 'slideInLeft');
// PushIn
} else if (transition == 'pushInVertical') {
transition = (currentSlideID > lastSlideID ? 'pushInTop' : 'pushInBottom');
} else if (transition == 'pushInVerticalReversed') {
transition = (currentSlideID < lastSlideID ? 'pushInTop' : 'pushInBottom');
} else if (transition == 'pushInHorizontal') {
transition = (currentSlideID > lastSlideID ? 'pushInRight' : 'pushInLeft');
} else if (transition == 'pushInHorizontalReversed') {
transition = (currentSlideID < lastSlideID ? 'pushInRight' : 'pushInLeft');
}
return transitions[transition];
};
/**
* Animate object from current prop value to the one specified in properties
*/
this.animate = function(obj, properties, duration, easing){
var
self = this,
options = self.options,
data = self.data,
properties_object = {},
tweenFunction,
timeStart = new Date().getTime();
if (!duration && duration !== 0) duration = options.transition.duration;
if (!easing) easing = options.transition.easing;
tweenFunction = self._tween(easing);
// Put current values into an object
for (var prop in properties) {
properties_object[prop] = obj.style[prop];
}
// Set transition to true
self.data.transition = true;
var animate = setInterval(function(){
var timePassed = new Date().getTime() - timeStart;
if (timePassed >= duration) timePassed = duration;
// Run property update per property
for (var prop in properties) {
if (properties.hasOwnProperty(prop)) {
var
defaultValue = properties_object[prop],
propValue = properties[prop],
newValue = null,
convertInt = false,
defaultSuffix = null,
negative = 0;
if (typeof defaultValue == 'string') defaultSuffix = defaultValue.replace(/^\-?[0-9\.]+(.*)$/, '$1');
defaultValue = parseFloat(defaultValue);
propValue = parseFloat(propValue);
// Make the smallest value into 0 and remove the difference from both values, save it in "negative"
if (propValue < 0 || defaultValue < 0) {
negative = (propValue < defaultValue ? propValue : defaultValue);
defaultValue = defaultValue-negative;
propValue = propValue-negative;
} else {
negative = (propValue < defaultValue ? propValue : defaultValue);
defaultValue = defaultValue-negative;
propValue = propValue-negative;
}
if (defaultValue > propValue) {
newValue = defaultValue-tweenFunction(timePassed, propValue, defaultValue, duration);
if (newValue < propValue) newValue = propValue;
} else if (defaultValue != propValue) {
newValue = tweenFunction(timePassed, defaultValue, propValue, duration);
if (newValue > propValue) newValue = propValue;
} else {
newValue = propValue;
}
// Remember "negative"? Add it back
if (negative !== 0) newValue = newValue+negative;
newValue = newValue+'';
newValue = newValue.replace(/([0-9]+(\.[0-9]{0,3})?).*/, "$1");
newValue = parseFloat(newValue);
if (defaultSuffix) {
newValue = newValue+defaultSuffix;
}
obj.style[prop] = newValue;
}
}
if (timePassed >= duration) {
clearInterval(animate);
// Make sure all properties are set to the correct final value
for (var prop in properties) {
if(properties.hasOwnProperty(prop)) {
var propValue = properties[prop],
propSuffix = null;
if (typeof propValue == 'string') propSuffix = propValue.replace(/^\-?[0-9\.]+(.*)$/, '$1');
propValue = parseFloat(propValue);
obj.style[prop] = (propSuffix ? propValue+propSuffix : propValue);
// Set transition to false
self.data.transition = false;
}
}
}
},24);
};
/**
* Merge multiple objects into one
*/
this._merge = function(){
var
self = this,
arraynew = {};
for (var ai in arguments) {
var array = arguments[ai];
for (var index in array) {
var value = null;
if (array.hasOwnProperty(index)) {
if (typeof array[index] == 'object' && arraynew[index] && typeof arraynew[index] == 'object') value = self._merge(arraynew[index], array[index]);
else value = array[index];
arraynew[index] = value;
}
}
}
return arraynew;
}
this._tween = function(type){
var tweens = {
/* Credit to Robert Penner @ http://gizma.com/easing */
// simple linear tweening - no easing, no acceleration
linear: function (t, b, c, d) {
return c*t/d + b;
},
// exponential easing in - accelerating from zero velocity
easeIn: function (t, b, c, d) {
return c * Math.pow( 2, 10 * (t/d - 1) ) + b;
},
// exponential easing out - decelerating to zero velocity
easeOut: function (t, b, c, d) {
return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
},
// exponential easing in/out - accelerating until halfway, then decelerating
easeInOut: function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2 * Math.pow( 2, 10 * (t - 1) ) + b;
t--;
return c/2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
}
};
return tweens[type];
};
// Run construct after everything is defined
this._construct(slideIdentifier, custom_options);
}
