<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - 3d carousel</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Josefin+Slab'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="background"></div>
<section class="container">
<div id="carousel">
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/41nrwU788-L.jpg" />
<h3>NOFX</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/51JHrRWAZ4L.jpg" />
<h3>Green Day</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/613npd9HJqL.jpg" />
<h3>Blink 182</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/513seObyj6L.jpg" />
<h3>The Starting Line</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="https://media.tumblr.com/c56e7b0fbc3a6879bf554c91bb17df60/tumblr_inline_n5sqqoGEK11qfo293.jpg" />
<h3>New Found Glory</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/51clrJHvG%2BL.jpg" />
<h3>Fenix TX</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/41nrwU788-L.jpg" />
<h3>NOFX</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/51JHrRWAZ4L.jpg" />
<h3>Green Day</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/613npd9HJqL.jpg" />
<h3>Blink 182</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/513seObyj6L.jpg" />
<h3>The Starting Line</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="https://media.tumblr.com/c56e7b0fbc3a6879bf554c91bb17df60/tumblr_inline_n5sqqoGEK11qfo293.jpg" />
<h3>New Found Glory</h3>
</a>
</figure>
<figure>
<a href="#">
<img src="http://ecx.images-amazon.com/images/I/51clrJHvG%2BL.jpg" />
<h3>Fenix TX</h3>
</a>
</figure>
</div>
</section>
<nav id="navigation">
<span class="navigation-control left" data-increment="1">></span>
<span class="navigation-control right" data-increment="-1"><</span>
</nav>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
font: 18px 'Josefin Slab' Serif;
background: rgba(238,244,248,1);
height: 100%;
}
a {
color: white;
font-weight: bold;
text-decoration: none;
}
.container {
width: 100%;
height: 100%;
max-width: 500px;
margin: 0 auto;
/* transform: perspective(5600px); */
-webkit-perspective:5600px;
perspective:5600px;
}
#carousel {
width: 50%;
height: 80%; display: block;
left: 25%; bottom: 10%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transition: -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
#carousel figure {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: opacity 1.5s, background-color 0.1s;
}
#carousel figure img {
width: 90%;
margin: 5%;
height: auto;
box-shadow: 0px 27px 62px 0px rgba(0,0,0,0.5);
border-radius: 0.2em;
}
.little-text-block {
width: 80%;
background-color: rgb(87,123,234);
margin: 0 auto;
bottom: 30%;
left: 10%;
width: 80%;
padding: 1em;
text-align: center;
font-weight: bold;
position: absolute;
}
/*
#carousel figure.main-panel {
background-color: blue;
}
#carousel figure.background-panel {
background-color: red;
}
#carousel figure.side-panel {
background-color: green;
}
#carousel figure.background-panel, #carousel figure.side-panel { opacity: 0 !important; }
#carousel figure.background-panel { opacity: 0 !important; } */
h3 {
padding: 1em;
background-color: #3c3c3c;
}
.navigation-control {
display: block;
color: red;
background-color: blue;
}
/* 3d Carousel image slider */
(function ( window ) {
'use strict';
/* Carousel constructor class */
var Carousel = function ( el, options ) {
var that = this;
this._settings = options || { };
// options
this._settings.startingFace = this._settings.startingFace || 1;
this._settings.autoplay = this._settings.autoplay || false;
this._settings.slideshowInterval = this._settings.slideshowInterval || 3000;
this._element = document.getElementById( el );
this._dragArea = document.body;
this._navButtons = document.querySelectorAll( '.navigation-control' );
this._panelCount = this._element.children.length;
this._theta = 0;
this._currentFace = 0;
this._segmentSize = 360 / this._panelCount;
this._lastDragX = null;
this._autoplayTimeout = null;
var i = 0,
j = 0,
len = this._element.children.length,
buttonLen = this._navButtons.length;
for ( ; i < len; i++ ) {
this._element.children[ i ].style[ 'transform' ] =
'rotateY( ' + ( i * ( this._segmentSize ) ) + 'deg )' +
'translateZ( ' + this._getTranslateZ() + 'px )';
}
for ( ; j < buttonLen; j++ ) {
this._navButtons[ j ].addEventListener( 'click', function ( event ) {
var value = event.target.getAttribute( 'data-increment' );
that._rotateWheel( value );
}, false );
}
this._element.addEventListener( 'touchmove', function (e) {
e.preventDefault();
var currentX = e.touches[0].clientX;
var dragValue = currentX > that._lastDragX ? 1 : -1;
that._dragRotate( dragValue );
that._lastDragX = currentX;
});
this._element.addEventListener( 'touchend', function (e) {
that._theta = Math.round( that._theta / that._segmentSize ) * that._segmentSize;
that._rotateWheel( 0 );
});
this._rotateWheel( this._settings.startingFace );
if ( this._settings.autoplay ) {
this.play();
}
};
/* Returns translateZ value based on size and panel count */
Carousel.prototype._getTranslateZ = function () {
return Math.round( ( this._element.children[ 0 ].clientWidth / 2 ) / Math.tan( Math.PI / this._panelCount ) );
};
/* Returns number of front facing slide in gallery */
Carousel.prototype._getFaceNumber = function ( angle ) {
if ( angle > 360 || angle < -359) {
return this._getFaceNumber( ( Math.abs( angle ) ) - 360 );
} else {
if ( this._theta < 1 ) {
return Math.abs( this._panelCount / ( 360 / angle ) ) + 1;
} else {
return Math.abs( this._panelCount / ( 360 / angle ) );
}
}
};
/* Sets the correct opacity for face positions */
Carousel.prototype._checkOpacity = function () {
var face = Math.round( this._getFaceNumber( this._theta ) );
var position = this._theta > 0 ? ( this._panelCount + 1 ) - face : face;
var newPos = position === ( this._panelCount + 1 ) ? 1 : position;
// hide out of sight faces
var i = 0,
len = this._element.children.length;
for (; i < len; i++) {
this._element.children[ i ].style[ 'opacity' ] = 0.1;
this._element.children[ i ].className = 'background-panel';
}
var main = this._element.children[ newPos - 1 ];
var leftSide = this._element.children[ newPos > this._panelCount - 1 ? 0 : newPos ];
var rightSide = this._element.children[ newPos - 2 < 0 ? this._panelCount - 1 : newPos - 2 ];
// change opacity for active panels
main.style[ 'opacity' ] = 1;
leftSide.style[ 'opacity' ] = 0.5;
rightSide.style[ 'opacity' ] = 0.5;
// add classes for custome styles
main.className = 'main-panel';
rightSide.className = 'right side-panel';
leftSide.className = 'left side-panel';
};
/* Rotate wheel by increment value */
/* Only use 1 or -1 */
Carousel.prototype._rotateWheel = function ( value ) {
var increment = parseInt(value);
this._theta += ( 360 / this._panelCount ) * increment * -1;
this._element.style[ 'transform' ] =
'translateZ(-' + this._getTranslateZ() + 'px)' +
'rotateY(' + this._theta + 'deg)';
this._checkOpacity();
};
/* Drag carousel */
Carousel.prototype._dragRotate = function ( distance ) {
this._theta += distance*10;
this._element.style[ transforms[ 'webkitTransform' ] ] =
'translateZ(-' + this._getTranslateZ() + 'px)' +
'rotateY(' + this._theta + 'deg)';
this._element.style[ transforms[ 'MozTransform' ] ] =
'translateZ(-' + this._getTranslateZ() + 'px)' +
'rotateY(' + this._theta + 'deg)';
this._checkOpacity();
};
/* Play Slide Show */
Carousel.prototype.play = function () {
var that = this;
clearInterval( this._autoplayTimeout );
this._autoplayTimeout = setInterval(function () {
that._rotateWheel( 1 );
}, this._settings.slideshowInterval);
};
/* Stop Slide Show */
Carousel.prototype.stop = function () {
clearInterval( this._autoplayTimeout );
};
window.mgrCarousel = Carousel;
}( window ));
var carousel = new mgrCarousel( 'carousel', { autoplay: true } );