Skip to content

Instantly share code, notes, and snippets.

@razchiriac

razchiriac/index.html

Created April 24, 2017 18:08
Show Gist options
  • Save razchiriac/949dae12438a82efd8f3a320af879fa7 to your computer and use it in GitHub Desktop.
Save razchiriac/949dae12438a82efd8f3a320af879fa7 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/kitugu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
html {
background: #DDD;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
html:hover nav a {
transform: scale(1, 1);
}
html:hover nav .left {
left: -15vw;
}
html:hover nav .right {
right: -15vw;
}
html:hover input {
opacity: 0.25;
transform: scale(1, 1);
}
html body {
margin: 100px 160px;
}
.carousel-container {
position: relative;
widht: 100%;
}
.carousel-container .frame {
z-index: 100;
position: absolute;
background-image: url("https://image.ibb.co/j8oAT5/term.png");
width: 100%;
height: 300%;
background-size: 40%;
background-repeat: no-repeat;
background-position: center 0;
}
.carousel-container section {
position: relative;
width: 50%;
margin: 0 auto;
}
.carousel-container ul {
position: relative;
top: 3px;
list-style-type: none;
}
.carousel-container ul li a {
position: relative;
display: block;
}
.carousel-container ul img {
width: 100%;
}
.carousel-container ul span {
position: absolute;
top: -20%;
left: -60%;
display: inline-block;
font-size: 1vw;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 0 5px #888;
}
.carousel-container ul span img {
width: 50%;
position: relative;
left: -16%;
top: 0;
}
</style>
</head>
<body>
<div class='carousel-container'>
<div class='frame'></div>
<section class='js-carousel1'>
<ul>
<li>
<a>
<img src="https://image.ibb.co/i560d5/step_1_ss.png" alt="step 1 ss"/>
<span>
<img src="https://image.ibb.co/ipumJ5/step_1_info.png">
</span>
</a>
</li>
<li>
<script src="https://code.jquery.com/jquery-git.js"></script>
<a>
<img src='https://image.ibb.co/n7cj5k/step_2_ss.png'>
<span>
<img src="https://image.ibb.co/gQZmJ5/step_2_info.png">
</span>
</a>
</li>
<li>
<a>
<img src='https://image.ibb.co/gbBoWQ/step_3_ss.png'>
<span>
<img src="https://image.ibb.co/jnXHQk/step_3_info.png">
</span>
</a>
</li>
</ul>
</section>
</div>
<script id="jsbin-javascript">
// Helper functions
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var getElement = function getElement(selector) {
return document.querySelector(selector);
};
var getElements = function getElements(selector) {
var nl = document.querySelectorAll(selector);
var a = [];
for (var i = 0, l = nl.length; i < l; i++) {
a[i] = nl[i];
}
return a;
};
var CarouselSetup = function CarouselSetup() {
var carousel = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
var items = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
var scale = arguments.length <= 2 || arguments[2] === undefined ? 3 : arguments[2];
var itemsPercentOf = arguments.length <= 3 || arguments[3] === undefined ? 0.25 : arguments[3];
var perspective = arguments.length <= 4 || arguments[4] === undefined ? 0.25 : arguments[4];
var depth = arguments.length <= 5 || arguments[5] === undefined ? 0.5 : arguments[5];
var float = arguments.length <= 6 || arguments[6] === undefined ? 'left' : arguments[6];
var animate = arguments.length <= 7 || arguments[7] === undefined ? 250 : arguments[7];
var fps = arguments.length <= 8 || arguments[8] === undefined ? 60 : arguments[8];
var opacity = arguments.length <= 9 || arguments[9] === undefined ? 0.125 : arguments[9];
var grayscale = arguments.length <= 10 || arguments[10] === undefined ? 0 : arguments[10];
var sepia = arguments.length <= 11 || arguments[11] === undefined ? 0 : arguments[11];
var blur = arguments.length <= 12 || arguments[12] === undefined ? 3 : arguments[12];
_classCallCheck(this, CarouselSetup);
// GENERAL
this.carousel = carousel; // Required. Container for elements; as selector string
this.items = items; // Required. Elements to move around; as selector string
this.scale = scale; // Optional. Carousel scale.
this.itemsPercentOf = itemsPercentOf; // Optional. Percent of items width, relative to the carousel's width
this.perspective = perspective; // Optional. Percent relative to the width; as a decimal
this.depth = depth; // Optional. Viewing depth percent; as a decimal
this.float = float; // Optional internationalization ordering. "Float" items to the 'left' or 'right'
// ANIMATION
this.animate = animate; // Optional. Animation duration in milleconds; as an int
this.fps = fps; // Optional. Frames Per Second; as an int
// FILTERS
this.opacity = opacity; // Optional. Opacity percent; as a decimal
this.grayscale = grayscale; // Optional. Grayscale percent; as a decimal
this.sepia = sepia; // Optional. Sepia percent; as a decimal
this.blur = blur; // Optional. Blur in pixels; as a number);
};
var Carousel3D = (function () {
function Carousel3D(myCarousel) {
var _this = this;
_classCallCheck(this, Carousel3D);
// General
this.myCarousel = myCarousel;
this.carousel = getElement(myCarousel.carousel);
this.items = getElements(myCarousel.items);
// Math Dependencies
this.itemWidthAndHeight = '';
this.itemMargin = '';
this.widthRadius = 0;
this.heightRadius = 0;
this.degrees = [];
this.degree = 0;
this.len = this.items.length;
this.half = Math.ceil(this.len / 2);
this.incBy = 360 / this.len;
// Animation
this.speed = this.myCarousel.animate ? this.myCarousel.animate / this.myCarousel.fps : 0;
this.divisions = this.myCarousel.animate ? this.myCarousel.animate / this.speed : 1;
this.fromDegree = 0;
this.toDegreeHigher = null;
this.degreesToAnimateBy = 0;
// MOVED
// let turning = () => {
// fromDegree += degreesToAnimateBy;
// let goToDegree = fromDegree < 0 ? 360 - ((-1 * fromDegree) % 360) : fromDegree;
// turn(goToDegree);
// };
// MOVED
// let animating = () => {
// setTimeout(() => {
// if(toDegreeHigher) {
// if (fromDegree >= degree) {
// clearTimeout(this);
// } else {
// turning();
// animating();
// }
// } else if (fromDegree <= degree) {
// clearTimeout(this);
// } else {
// turning();
// animating();
// }
// }, speed);
// };
// Run
// MOVED
// let run = extDegree => {
// if (myCarousel) {
// let turnTo = extDegree;
// toDegreeHigher = turnTo > degree;
// fromDegree = degree;
// degree = turnTo;
// degreesToAnimateBy = (degree - fromDegree) / divisions;
// animating();
// } else {
// turn(extDegree);
// }
// };
// Turn
// MOVED
// let turn = deg => {
// let i = 0;
// var d = []; // new degrees array
// for (;i<len;i++) {
// d[i] = degrees[i] + deg + 90;
// }
// i = 0;
// for (;i<len;i++) {
// let r = d[i] * Math.PI / 180;
// let rr = ((degrees[i] + deg) % 360) * Math.PI / 180;
// let percentAsDecimal = rr < Math.PI ? rr / Math.PI : ((Math.PI * 2) - rr) / Math.PI;
// let s = rr > Math.PI ? 1 - ((Math.PI - (rr - Math.PI)) / (Math.PI * myCarousel.depth)) : 1 - (rr / (Math.PI * myCarousel.depth));
// let x = widthRadius * Math.cos(r) + widthRadius;
// let y = heightRadius * Math.sin(r) + heightRadius;
// let z = (() => {
// var degreeMod360 = (degrees[i] + deg + 180) % 360;
// return Math.round(degreeMod360 > 180 ? (180 - (degreeMod360 - 180)) / incBy : degreeMod360 / incBy);
// }());
// // set scale
// s *= myCarousel.scale;
// let p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + itemMargin + itemWidthAndHeight +
// '-webkit-transform:scale(' + s + ',' + s + ');' +
// '-moz-transform:scale(' + s + ',' + s + ');' +
// '-ms-transform:scale(' + s + ',' + s + ');' +
// '-o-transform:scale(' + s + ',' + s + ');' +
// 'transform:scale(' + s + ',' + s + ');';
// let fOpacity = 'opacity:' + (myCarousel.opacity < 1 ? 1 - ((1 - (1 * myCarousel.opacity)) * percentAsDecimal) : 1) + ';';
// let fGrayscale = 'grayscale(' + (myCarousel.grayscale ? (1 * myCarousel.grayscale) * percentAsDecimal : 0) + ')';
// let fSepia = 'sepia('+ (myCarousel.sepia ? (1 * myCarousel.sepia) * percentAsDecimal : 0) + ')';
// let fBlur = 'blur('+ (myCarousel.blur ? (myCarousel.blur * percentAsDecimal) : 0) + 'px)';
// let f = fOpacity +
// '-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// 'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
// items[i].style.cssText = p + f;
// }
// }; // turn
// Reset
// MOVED
// let reset = () => {
// // Carousel size
// let carouselWidth = carousel.offsetWidth;
// let carouselHeight = carouselWidth * myCarousel.perspective;
// carousel.style.height = carouselHeight + 'px';
// // Items size
// let aspectPointWidth = items[0].offsetWidth;
// let aspectPointHeight = items[0].offsetHeight;
// let itemAspectRatio = aspectPointHeight / aspectPointWidth;
// let itemWidthNum = carouselWidth * myCarousel.itemsPercentOf;
// itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
// itemMargin = 'margin:-' + ((itemWidthNum * itemAspectRatio) / 2) + 'px auto auto -' + (itemWidthNum / 2) + 'px;';
// // Math
// widthRadius = carouselWidth / 2;
// heightRadius = carouselHeight / 2;
// degrees = [myCarousel.float === 'left' ? 360 : 0]; // Reset degrees and first elem
// for (let i=1;i<len;i++) {
// degrees.push(myCarousel.float === 'left' ? 360 - Math.floor(i * incBy) : Math.floor(i * incBy));
// }
// // Position the items
// turn(0);
// };
// Hard reset
// MOVED
// let hardReset = () => {
// items = $$(itemsStr);
// len = items.length;
// half = Math.ceil(len / 2);
// incBy = 360 / len;
// reset();
// };
//Init
(function () {
// CUCUMBER DOESN'T LIKE THE NEXT 3 LINES!!!
_this.reset.bind(_this)();
// window.addEventListener('load', reset.bind(this));
// window.addEventListener('resize',reset.bind(this));
}).bind(this)();
// // Dev API
// return {
// turn: run,
// reset: hardReset
// };
}
// Carousel3D
// constructor
_createClass(Carousel3D, [{
key: 'turning',
value: function turning() {
this.fromDegree += this.degreesToAnimateBy;
var goToDegree = this.fromDegree < 0 ? 360 - -1 * this.fromDegree % 360 : this.fromDegree;
this.turn(goToDegree);
}
}, {
key: 'animating',
value: function animating() {
var _this2 = this;
var animationTimeout = setTimeout(function () {
if (_this2.toDegreeHigher) {
if (_this2.fromDegree >= _this2.degree) {
clearTimeout(animationTimeout);
} else {
_this2.turning();
_this2.animating();
}
} else if (_this2.fromDegree <= _this2.degree) {
clearTimeout(animationTimeout);
} else {
_this2.turning();
_this2.animating();
}
}, this.speed);
}
// Run
}, {
key: 'run',
value: function run(extDegree) {
// debugger;
if (this.carousel) {
var turnTo = extDegree;
this.toDegreeHigher = turnTo > this.degree;
this.fromDegree = this.degree;
this.degree = turnTo;
this.degreesToAnimateBy = (this.degree - this.fromDegree) / this.divisions;
this.animating();
} else {
this.turn(extDegree);
}
}
// Turn
}, {
key: 'turn',
value: function turn(deg) {
var _this3 = this;
var i = 0;
var d = []; // new degrees array
for (; i < this.len; i++) {
d[i] = this.degrees[i] + deg + 90;
}
i = 0;
for (; i < this.len; i++) {
var r = d[i] * Math.PI / 180;
var rr = (this.degrees[i] + deg) % 360 * Math.PI / 180;
var percentAsDecimal = rr < Math.PI ? rr / Math.PI : (Math.PI * 2 - rr) / Math.PI;
var s = rr > Math.PI ? 1 - (Math.PI - (rr - Math.PI)) / (Math.PI * this.myCarousel.depth) : 1 - rr / (Math.PI * this.myCarousel.depth);
var x = this.widthRadius * Math.cos(r) + this.widthRadius;
var y = this.heightRadius * Math.sin(r) + this.heightRadius;
var z = (function () {
var degreeMod360 = (_this3.degrees[i] + deg + 180) % 360;
return Math.round(degreeMod360 > 180 ? (180 - (degreeMod360 - 180)) / _this3.incBy : degreeMod360 / _this3.incBy);
})();
// set scale
s *= this.myCarousel.scale;
var p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + this.itemMargin + this.itemWidthAndHeight + '-webkit-transform:scale(' + s + ',' + s + ');' + '-moz-transform:scale(' + s + ',' + s + ');' + '-ms-transform:scale(' + s + ',' + s + ');' + '-o-transform:scale(' + s + ',' + s + ');' + 'transform:scale(' + s + ',' + s + ');';
var fOpacity = 'opacity:' + (this.myCarousel.opacity < 1 ? 1 - (1 - 1 * this.myCarousel.opacity) * percentAsDecimal : 1) + ';';
var fGrayscale = 'grayscale(' + (this.myCarousel.grayscale ? 1 * this.myCarousel.grayscale * this.percentAsDecimal : 0) + ')';
var fSepia = 'sepia(' + (this.myCarousel.sepia ? 1 * this.myCarousel.sepia * this.percentAsDecimal : 0) + ')';
var fBlur = 'blur(' + (this.myCarousel.blur ? this.myCarousel.blur * this.percentAsDecimal : 0) + 'px)';
var f = fOpacity + '-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + '-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + '-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + '-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + 'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
this.items[i].style.cssText = p + f;
}
}
// turn
// Reset
}, {
key: 'reset',
value: function reset() {
// Carousel size
var carouselWidth = this.carousel.offsetWidth;
var carouselHeight = carouselWidth * this.myCarousel.perspective;
this.carousel.style.height = carouselHeight + 'px';
// Items size
var aspectPointWidth = this.items[0].offsetWidth;
var aspectPointHeight = this.items[0].offsetHeight;
var itemAspectRatio = aspectPointHeight / aspectPointWidth;
var itemWidthNum = carouselWidth * this.myCarousel.itemsPercentOf;
this.itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
this.itemMargin = 'margin:-' + itemWidthNum * itemAspectRatio / 2 + 'px auto auto -' + itemWidthNum / 2 + 'px;';
// Math
this.widthRadius = carouselWidth / 2;
this.heightRadius = carouselHeight / 2;
this.degrees = [this.myCarousel.float === 'left' ? 360 : 0]; // Reset degrees and first elem
for (var i = 1; i < this.len; i++) {
this.degrees.push(this.myCarousel.float === 'left' ? 360 - Math.floor(i * this.incBy) : Math.floor(i * this.incBy));
}
// Position the items
this.turn(0);
}
// Hard reset
}, {
key: 'hardReset',
value: function hardReset() {
this.items = getElements(this.myCarousel.items);
this.len = this.items.length;
this.half = Math.ceil(this.len / 2);
this.incBy = 360 / this.len;
this.reset();
}
}]);
return Carousel3D;
})();
$(function () {
var myCarouselSetup = new CarouselSetup('.js-carousel1 ul', '.js-carousel1 li');
var carouselOne = new Carousel3D(myCarouselSetup);
carouselOne.hardReset();
var degree = 0;
// debugger;
var incrementBy = 360 / $(carouselOne.items).length;
var autorunCarousel = function autorunCarousel(period) {
var revolve = function revolve(period) {
degree += incrementBy;
carouselOne.run(degree);
};
setInterval(revolve, period);
};
autorunCarousel(3000);
});
// Default Settings
</script>
<script id="jsbin-source-css" type="text/css">
html {
background: #DDD;
&:hover {
nav {
a {
transform:scale(1,1);
}
.left {
left: -15vw;
}
.right {
right: -15vw;
}
}
input {
opacity: 0.25;
transform:scale(1,1);
}
}
body {
margin: 100px 160px;
}
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.carousel-container {
position: relative;
widht: 100%;
.frame {
z-index: 100;
position: absolute;
background-image:url('https://image.ibb.co/j8oAT5/term.png');
width: 100%;
height: 300%;
background-size: 40%;
background-repeat: no-repeat;
background-position: center 0;
}
section {
position: relative;
width: 50%;
// margin: 50px 25%;
margin: 0 auto;
}
ul {
position: relative;
top: 3px;
list-style-type: none;
li {
a {
position: relative;
display: block;
}
}
img {
width: 100%;
}
span {
position: absolute;
top: -20%;
left: -60%;
display: inline-block;
font-size: 1vw;
color: rgba(255,255,255,0.5);
text-shadow: 0 0 5px #888;
img {
width: 50%;
position: relative;
left: -16%;
top: 0;
}
}
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Helper functions
const getElement = selector => document.querySelector(selector);
const getElements = selector => {
let nl = document.querySelectorAll(selector);
let a = [];
for (let i=0, l=nl.length; i<l; i++) {
a[i] = nl[i];
}
return a;
};
class CarouselSetup {
constructor ( // Default Settings
carousel = '',
items = '',
scale = 3,
itemsPercentOf = 0.25,
perspective = 0.25,
depth = 0.5,
float = 'left',
animate = 250,
fps = 60,
opacity = 0.125,
grayscale = 0,
sepia = 0,
blur = 3
) {
// GENERAL
this.carousel = carousel; // Required. Container for elements; as selector string
this.items = items; // Required. Elements to move around; as selector string
this.scale = scale; // Optional. Carousel scale.
this.itemsPercentOf = itemsPercentOf; // Optional. Percent of items width, relative to the carousel's width
this.perspective = perspective; // Optional. Percent relative to the width; as a decimal
this.depth = depth; // Optional. Viewing depth percent; as a decimal
this.float = float; // Optional internationalization ordering. "Float" items to the 'left' or 'right'
// ANIMATION
this.animate = animate; // Optional. Animation duration in milleconds; as an int
this.fps = fps; // Optional. Frames Per Second; as an int
// FILTERS
this.opacity = opacity; // Optional. Opacity percent; as a decimal
this.grayscale = grayscale; // Optional. Grayscale percent; as a decimal
this.sepia = sepia; // Optional. Sepia percent; as a decimal
this. blur = blur; // Optional. Blur in pixels; as a number);
}
}
class Carousel3D {
constructor(myCarousel) {
// General
this.myCarousel = myCarousel;
this.carousel = getElement(myCarousel.carousel);
this.items = getElements(myCarousel.items);
// Math Dependencies
this.itemWidthAndHeight = '';
this.itemMargin = '';
this.widthRadius = 0;
this.heightRadius = 0;
this.degrees = [];
this.degree = 0;
this.len = this.items.length;
this.half = Math.ceil(this.len / 2);
this.incBy = 360 / this.len;
// Animation
this.speed = this.myCarousel.animate ? this.myCarousel.animate / this.myCarousel.fps : 0;
this.divisions = this.myCarousel.animate ? this.myCarousel.animate / this.speed : 1;
this.fromDegree = 0;
this.toDegreeHigher = null;
this.degreesToAnimateBy = 0;
// MOVED
// let turning = () => {
// fromDegree += degreesToAnimateBy;
// let goToDegree = fromDegree < 0 ? 360 - ((-1 * fromDegree) % 360) : fromDegree;
// turn(goToDegree);
// };
// MOVED
// let animating = () => {
// setTimeout(() => {
// if(toDegreeHigher) {
// if (fromDegree >= degree) {
// clearTimeout(this);
// } else {
// turning();
// animating();
// }
// } else if (fromDegree <= degree) {
// clearTimeout(this);
// } else {
// turning();
// animating();
// }
// }, speed);
// };
// Run
// MOVED
// let run = extDegree => {
// if (myCarousel) {
// let turnTo = extDegree;
// toDegreeHigher = turnTo > degree;
// fromDegree = degree;
// degree = turnTo;
// degreesToAnimateBy = (degree - fromDegree) / divisions;
// animating();
// } else {
// turn(extDegree);
// }
// };
// Turn
// MOVED
// let turn = deg => {
// let i = 0;
// var d = []; // new degrees array
// for (;i<len;i++) {
// d[i] = degrees[i] + deg + 90;
// }
// i = 0;
// for (;i<len;i++) {
// let r = d[i] * Math.PI / 180;
// let rr = ((degrees[i] + deg) % 360) * Math.PI / 180;
// let percentAsDecimal = rr < Math.PI ? rr / Math.PI : ((Math.PI * 2) - rr) / Math.PI;
// let s = rr > Math.PI ? 1 - ((Math.PI - (rr - Math.PI)) / (Math.PI * myCarousel.depth)) : 1 - (rr / (Math.PI * myCarousel.depth));
// let x = widthRadius * Math.cos(r) + widthRadius;
// let y = heightRadius * Math.sin(r) + heightRadius;
// let z = (() => {
// var degreeMod360 = (degrees[i] + deg + 180) % 360;
// return Math.round(degreeMod360 > 180 ? (180 - (degreeMod360 - 180)) / incBy : degreeMod360 / incBy);
// }());
// // set scale
// s *= myCarousel.scale;
// let p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + itemMargin + itemWidthAndHeight +
// '-webkit-transform:scale(' + s + ',' + s + ');' +
// '-moz-transform:scale(' + s + ',' + s + ');' +
// '-ms-transform:scale(' + s + ',' + s + ');' +
// '-o-transform:scale(' + s + ',' + s + ');' +
// 'transform:scale(' + s + ',' + s + ');';
// let fOpacity = 'opacity:' + (myCarousel.opacity < 1 ? 1 - ((1 - (1 * myCarousel.opacity)) * percentAsDecimal) : 1) + ';';
// let fGrayscale = 'grayscale(' + (myCarousel.grayscale ? (1 * myCarousel.grayscale) * percentAsDecimal : 0) + ')';
// let fSepia = 'sepia('+ (myCarousel.sepia ? (1 * myCarousel.sepia) * percentAsDecimal : 0) + ')';
// let fBlur = 'blur('+ (myCarousel.blur ? (myCarousel.blur * percentAsDecimal) : 0) + 'px)';
// let f = fOpacity +
// '-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// 'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
// items[i].style.cssText = p + f;
// }
// }; // turn
// Reset
// MOVED
// let reset = () => {
// // Carousel size
// let carouselWidth = carousel.offsetWidth;
// let carouselHeight = carouselWidth * myCarousel.perspective;
// carousel.style.height = carouselHeight + 'px';
// // Items size
// let aspectPointWidth = items[0].offsetWidth;
// let aspectPointHeight = items[0].offsetHeight;
// let itemAspectRatio = aspectPointHeight / aspectPointWidth;
// let itemWidthNum = carouselWidth * myCarousel.itemsPercentOf;
// itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
// itemMargin = 'margin:-' + ((itemWidthNum * itemAspectRatio) / 2) + 'px auto auto -' + (itemWidthNum / 2) + 'px;';
// // Math
// widthRadius = carouselWidth / 2;
// heightRadius = carouselHeight / 2;
// degrees = [myCarousel.float === 'left' ? 360 : 0]; // Reset degrees and first elem
// for (let i=1;i<len;i++) {
// degrees.push(myCarousel.float === 'left' ? 360 - Math.floor(i * incBy) : Math.floor(i * incBy));
// }
// // Position the items
// turn(0);
// };
// Hard reset
// MOVED
// let hardReset = () => {
// items = $$(itemsStr);
// len = items.length;
// half = Math.ceil(len / 2);
// incBy = 360 / len;
// reset();
// };
//Init
(() => {
// CUCUMBER DOESN'T LIKE THE NEXT 3 LINES!!!
this.reset.bind(this)();
// window.addEventListener('load', reset.bind(this));
// window.addEventListener('resize',reset.bind(this));
}.bind(this))();
// // Dev API
// return {
// turn: run,
// reset: hardReset
// };
} // constructor
turning() {
this.fromDegree += this.degreesToAnimateBy;
let goToDegree = this.fromDegree < 0 ? 360 - ((-1 * this.fromDegree) % 360) : this.fromDegree;
this.turn(goToDegree);
}
animating() {
let animationTimeout = setTimeout(() => {
if(this.toDegreeHigher) {
if (this.fromDegree >= this.degree) {
clearTimeout(animationTimeout);
} else {
this.turning();
this.animating();
}
} else if (this.fromDegree <= this.degree) {
clearTimeout(animationTimeout);
} else {
this.turning();
this.animating();
}
}, this.speed);
}
// Run
run(extDegree) {
// debugger;
if (this.carousel) {
let turnTo = extDegree;
this.toDegreeHigher = turnTo > this.degree;
this.fromDegree = this.degree;
this.degree = turnTo;
this.degreesToAnimateBy = (this.degree - this.fromDegree) / this.divisions;
this.animating();
} else {
this.turn(extDegree);
}
}
// Turn
turn(deg) {
let i = 0;
var d = []; // new degrees array
for (;i<this.len;i++) {
d[i] = this.degrees[i] + deg + 90;
}
i = 0;
for (;i<this.len;i++) {
let r = d[i] * Math.PI / 180;
let rr = ((this.degrees[i] + deg) % 360) * Math.PI / 180;
let percentAsDecimal = rr < Math.PI ? rr / Math.PI : ((Math.PI * 2) - rr) / Math.PI;
let s = rr > Math.PI ?
1 - ((Math.PI - (rr - Math.PI)) / (Math.PI * this.myCarousel.depth))
: 1 - (rr / (Math.PI * this.myCarousel.depth));
let x = this.widthRadius * Math.cos(r) + this.widthRadius;
let y = this.heightRadius * Math.sin(r) + this.heightRadius;
let z = (() => {
var degreeMod360 = (this.degrees[i] + deg + 180) % 360;
return Math.round(degreeMod360 > 180 ?
(180 - (degreeMod360 - 180)) / this.incBy
: degreeMod360 / this.incBy);
}());
// set scale
s *= this.myCarousel.scale;
let p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + this.itemMargin + this.itemWidthAndHeight +
'-webkit-transform:scale(' + s + ',' + s + ');' +
'-moz-transform:scale(' + s + ',' + s + ');' +
'-ms-transform:scale(' + s + ',' + s + ');' +
'-o-transform:scale(' + s + ',' + s + ');' +
'transform:scale(' + s + ',' + s + ');';
let fOpacity = 'opacity:' + (this.myCarousel.opacity < 1 ? 1 - ((1 - (1 * this.myCarousel.opacity)) * percentAsDecimal) : 1) + ';';
let fGrayscale = 'grayscale(' + (this.myCarousel.grayscale ? (1 * this.myCarousel.grayscale) * this.percentAsDecimal : 0) + ')';
let fSepia = 'sepia('+ (this.myCarousel.sepia ? (1 * this.myCarousel.sepia) * this.percentAsDecimal : 0) + ')';
let fBlur = 'blur('+ (this.myCarousel.blur ? (this.myCarousel.blur * this.percentAsDecimal) : 0) + 'px)';
let f = fOpacity +
'-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
this.items[i].style.cssText = p + f;
}
} // turn
// Reset
reset() {
// Carousel size
let carouselWidth = this.carousel.offsetWidth;
let carouselHeight = carouselWidth * this.myCarousel.perspective;
this.carousel.style.height = carouselHeight + 'px';
// Items size
let aspectPointWidth = this.items[0].offsetWidth;
let aspectPointHeight = this.items[0].offsetHeight;
let itemAspectRatio = aspectPointHeight / aspectPointWidth;
let itemWidthNum = carouselWidth * this.myCarousel.itemsPercentOf;
this.itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
this.itemMargin = 'margin:-' + ((itemWidthNum * itemAspectRatio) / 2) + 'px auto auto -' + (itemWidthNum / 2) + 'px;';
// Math
this.widthRadius = carouselWidth / 2;
this.heightRadius = carouselHeight / 2;
this.degrees = [this.myCarousel.float === 'left' ? 360 : 0]; // Reset degrees and first elem
for (let i=1;i<this.len;i++) {
this.degrees.push(this.myCarousel.float === 'left' ? 360 - Math.floor(i * this.incBy) : Math.floor(i * this.incBy));
}
// Position the items
this.turn(0);
}
// Hard reset
hardReset() {
this.items = getElements(this.myCarousel.items);
this.len = this.items.length;
this.half = Math.ceil(this.len / 2);
this.incBy = 360 / this.len;
this.reset();
}
} // Carousel3D
$(() => {
let myCarouselSetup = new CarouselSetup('.js-carousel1 ul', '.js-carousel1 li');
let carouselOne = new Carousel3D(myCarouselSetup);
carouselOne.hardReset();
let degree = 0;
// debugger;
let incrementBy = 360 / $(carouselOne.items).length;
let autorunCarousel = period => {
let revolve = (period) => {
degree += incrementBy;
carouselOne.run(degree);
};
setInterval(revolve, period);
};
autorunCarousel(3000);
});
</script></body>
</html>
Raw
jsbin.kitugu.css
html {
background: #DDD;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
html:hover nav a {
transform: scale(1, 1);
}
html:hover nav .left {
left: -15vw;
}
html:hover nav .right {
right: -15vw;
}
html:hover input {
opacity: 0.25;
transform: scale(1, 1);
}
html body {
margin: 100px 160px;
}
.carousel-container {
position: relative;
widht: 100%;
}
.carousel-container .frame {
z-index: 100;
position: absolute;
background-image: url("https://image.ibb.co/j8oAT5/term.png");
width: 100%;
height: 300%;
background-size: 40%;
background-repeat: no-repeat;
background-position: center 0;
}
.carousel-container section {
position: relative;
width: 50%;
margin: 0 auto;
}
.carousel-container ul {
position: relative;
top: 3px;
list-style-type: none;
}
.carousel-container ul li a {
position: relative;
display: block;
}
.carousel-container ul img {
width: 100%;
}
.carousel-container ul span {
position: absolute;
top: -20%;
left: -60%;
display: inline-block;
font-size: 1vw;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 0 5px #888;
}
.carousel-container ul span img {
width: 50%;
position: relative;
left: -16%;
top: 0;
}
Raw
jsbin.kitugu.js
// Helper functions
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var getElement = function getElement(selector) {
return document.querySelector(selector);
};
var getElements = function getElements(selector) {
var nl = document.querySelectorAll(selector);
var a = [];
for (var i = 0, l = nl.length; i < l; i++) {
a[i] = nl[i];
}
return a;
};
var CarouselSetup = function CarouselSetup() {
var carousel = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
var items = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
var scale = arguments.length <= 2 || arguments[2] === undefined ? 3 : arguments[2];
var itemsPercentOf = arguments.length <= 3 || arguments[3] === undefined ? 0.25 : arguments[3];
var perspective = arguments.length <= 4 || arguments[4] === undefined ? 0.25 : arguments[4];
var depth = arguments.length <= 5 || arguments[5] === undefined ? 0.5 : arguments[5];
var float = arguments.length <= 6 || arguments[6] === undefined ? 'left' : arguments[6];
var animate = arguments.length <= 7 || arguments[7] === undefined ? 250 : arguments[7];
var fps = arguments.length <= 8 || arguments[8] === undefined ? 60 : arguments[8];
var opacity = arguments.length <= 9 || arguments[9] === undefined ? 0.125 : arguments[9];
var grayscale = arguments.length <= 10 || arguments[10] === undefined ? 0 : arguments[10];
var sepia = arguments.length <= 11 || arguments[11] === undefined ? 0 : arguments[11];
var blur = arguments.length <= 12 || arguments[12] === undefined ? 3 : arguments[12];
_classCallCheck(this, CarouselSetup);
// GENERAL
this.carousel = carousel; // Required. Container for elements; as selector string
this.items = items; // Required. Elements to move around; as selector string
this.scale = scale; // Optional. Carousel scale.
this.itemsPercentOf = itemsPercentOf; // Optional. Percent of items width, relative to the carousel's width
this.perspective = perspective; // Optional. Percent relative to the width; as a decimal
this.depth = depth; // Optional. Viewing depth percent; as a decimal
this.float = float; // Optional internationalization ordering. "Float" items to the 'left' or 'right'
// ANIMATION
this.animate = animate; // Optional. Animation duration in milleconds; as an int
this.fps = fps; // Optional. Frames Per Second; as an int
// FILTERS
this.opacity = opacity; // Optional. Opacity percent; as a decimal
this.grayscale = grayscale; // Optional. Grayscale percent; as a decimal
this.sepia = sepia; // Optional. Sepia percent; as a decimal
this.blur = blur; // Optional. Blur in pixels; as a number);
};
var Carousel3D = (function () {
function Carousel3D(myCarousel) {
var _this = this;
_classCallCheck(this, Carousel3D);
// General
this.myCarousel = myCarousel;
this.carousel = getElement(myCarousel.carousel);
this.items = getElements(myCarousel.items);
// Math Dependencies
this.itemWidthAndHeight = '';
this.itemMargin = '';
this.widthRadius = 0;
this.heightRadius = 0;
this.degrees = [];
this.degree = 0;
this.len = this.items.length;
this.half = Math.ceil(this.len / 2);
this.incBy = 360 / this.len;
// Animation
this.speed = this.myCarousel.animate ? this.myCarousel.animate / this.myCarousel.fps : 0;
this.divisions = this.myCarousel.animate ? this.myCarousel.animate / this.speed : 1;
this.fromDegree = 0;
this.toDegreeHigher = null;
this.degreesToAnimateBy = 0;
// MOVED
// let turning = () => {
// fromDegree += degreesToAnimateBy;
// let goToDegree = fromDegree < 0 ? 360 - ((-1 * fromDegree) % 360) : fromDegree;
// turn(goToDegree);
// };
// MOVED
// let animating = () => {
// setTimeout(() => {
// if(toDegreeHigher) {
// if (fromDegree >= degree) {
// clearTimeout(this);
// } else {
// turning();
// animating();
// }
// } else if (fromDegree <= degree) {
// clearTimeout(this);
// } else {
// turning();
// animating();
// }
// }, speed);
// };
// Run
// MOVED
// let run = extDegree => {
// if (myCarousel) {
// let turnTo = extDegree;
// toDegreeHigher = turnTo > degree;
// fromDegree = degree;
// degree = turnTo;
// degreesToAnimateBy = (degree - fromDegree) / divisions;
// animating();
// } else {
// turn(extDegree);
// }
// };
// Turn
// MOVED
// let turn = deg => {
// let i = 0;
// var d = []; // new degrees array
// for (;i<len;i++) {
// d[i] = degrees[i] + deg + 90;
// }
// i = 0;
// for (;i<len;i++) {
// let r = d[i] * Math.PI / 180;
// let rr = ((degrees[i] + deg) % 360) * Math.PI / 180;
// let percentAsDecimal = rr < Math.PI ? rr / Math.PI : ((Math.PI * 2) - rr) / Math.PI;
// let s = rr > Math.PI ? 1 - ((Math.PI - (rr - Math.PI)) / (Math.PI * myCarousel.depth)) : 1 - (rr / (Math.PI * myCarousel.depth));
// let x = widthRadius * Math.cos(r) + widthRadius;
// let y = heightRadius * Math.sin(r) + heightRadius;
// let z = (() => {
// var degreeMod360 = (degrees[i] + deg + 180) % 360;
// return Math.round(degreeMod360 > 180 ? (180 - (degreeMod360 - 180)) / incBy : degreeMod360 / incBy);
// }());
// // set scale
// s *= myCarousel.scale;
// let p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + itemMargin + itemWidthAndHeight +
// '-webkit-transform:scale(' + s + ',' + s + ');' +
// '-moz-transform:scale(' + s + ',' + s + ');' +
// '-ms-transform:scale(' + s + ',' + s + ');' +
// '-o-transform:scale(' + s + ',' + s + ');' +
// 'transform:scale(' + s + ',' + s + ');';
// let fOpacity = 'opacity:' + (myCarousel.opacity < 1 ? 1 - ((1 - (1 * myCarousel.opacity)) * percentAsDecimal) : 1) + ';';
// let fGrayscale = 'grayscale(' + (myCarousel.grayscale ? (1 * myCarousel.grayscale) * percentAsDecimal : 0) + ')';
// let fSepia = 'sepia('+ (myCarousel.sepia ? (1 * myCarousel.sepia) * percentAsDecimal : 0) + ')';
// let fBlur = 'blur('+ (myCarousel.blur ? (myCarousel.blur * percentAsDecimal) : 0) + 'px)';
// let f = fOpacity +
// '-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// '-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' +
// 'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
// items[i].style.cssText = p + f;
// }
// }; // turn
// Reset
// MOVED
// let reset = () => {
// // Carousel size
// let carouselWidth = carousel.offsetWidth;
// let carouselHeight = carouselWidth * myCarousel.perspective;
// carousel.style.height = carouselHeight + 'px';
// // Items size
// let aspectPointWidth = items[0].offsetWidth;
// let aspectPointHeight = items[0].offsetHeight;
// let itemAspectRatio = aspectPointHeight / aspectPointWidth;
// let itemWidthNum = carouselWidth * myCarousel.itemsPercentOf;
// itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
// itemMargin = 'margin:-' + ((itemWidthNum * itemAspectRatio) / 2) + 'px auto auto -' + (itemWidthNum / 2) + 'px;';
// // Math
// widthRadius = carouselWidth / 2;
// heightRadius = carouselHeight / 2;
// degrees = [myCarousel.float === 'left' ? 360 : 0]; // Reset degrees and first elem
// for (let i=1;i<len;i++) {
// degrees.push(myCarousel.float === 'left' ? 360 - Math.floor(i * incBy) : Math.floor(i * incBy));
// }
// // Position the items
// turn(0);
// };
// Hard reset
// MOVED
// let hardReset = () => {
// items = $$(itemsStr);
// len = items.length;
// half = Math.ceil(len / 2);
// incBy = 360 / len;
// reset();
// };
//Init
(function () {
// CUCUMBER DOESN'T LIKE THE NEXT 3 LINES!!!
_this.reset.bind(_this)();
// window.addEventListener('load', reset.bind(this));
// window.addEventListener('resize',reset.bind(this));
}).bind(this)();
// // Dev API
// return {
// turn: run,
// reset: hardReset
// };
}
// Carousel3D
// constructor
_createClass(Carousel3D, [{
key: 'turning',
value: function turning() {
this.fromDegree += this.degreesToAnimateBy;
var goToDegree = this.fromDegree < 0 ? 360 - -1 * this.fromDegree % 360 : this.fromDegree;
this.turn(goToDegree);
}
}, {
key: 'animating',
value: function animating() {
var _this2 = this;
var animationTimeout = setTimeout(function () {
if (_this2.toDegreeHigher) {
if (_this2.fromDegree >= _this2.degree) {
clearTimeout(animationTimeout);
} else {
_this2.turning();
_this2.animating();
}
} else if (_this2.fromDegree <= _this2.degree) {
clearTimeout(animationTimeout);
} else {
_this2.turning();
_this2.animating();
}
}, this.speed);
}
// Run
}, {
key: 'run',
value: function run(extDegree) {
// debugger;
if (this.carousel) {
var turnTo = extDegree;
this.toDegreeHigher = turnTo > this.degree;
this.fromDegree = this.degree;
this.degree = turnTo;
this.degreesToAnimateBy = (this.degree - this.fromDegree) / this.divisions;
this.animating();
} else {
this.turn(extDegree);
}
}
// Turn
}, {
key: 'turn',
value: function turn(deg) {
var _this3 = this;
var i = 0;
var d = []; // new degrees array
for (; i < this.len; i++) {
d[i] = this.degrees[i] + deg + 90;
}
i = 0;
for (; i < this.len; i++) {
var r = d[i] * Math.PI / 180;
var rr = (this.degrees[i] + deg) % 360 * Math.PI / 180;
var percentAsDecimal = rr < Math.PI ? rr / Math.PI : (Math.PI * 2 - rr) / Math.PI;
var s = rr > Math.PI ? 1 - (Math.PI - (rr - Math.PI)) / (Math.PI * this.myCarousel.depth) : 1 - rr / (Math.PI * this.myCarousel.depth);
var x = this.widthRadius * Math.cos(r) + this.widthRadius;
var y = this.heightRadius * Math.sin(r) + this.heightRadius;
var z = (function () {
var degreeMod360 = (_this3.degrees[i] + deg + 180) % 360;
return Math.round(degreeMod360 > 180 ? (180 - (degreeMod360 - 180)) / _this3.incBy : degreeMod360 / _this3.incBy);
})();
// set scale
s *= this.myCarousel.scale;
var p = 'position:absolute;z-index:' + z + ';left:' + x + 'px;top:' + y + 'px;' + this.itemMargin + this.itemWidthAndHeight + '-webkit-transform:scale(' + s + ',' + s + ');' + '-moz-transform:scale(' + s + ',' + s + ');' + '-ms-transform:scale(' + s + ',' + s + ');' + '-o-transform:scale(' + s + ',' + s + ');' + 'transform:scale(' + s + ',' + s + ');';
var fOpacity = 'opacity:' + (this.myCarousel.opacity < 1 ? 1 - (1 - 1 * this.myCarousel.opacity) * percentAsDecimal : 1) + ';';
var fGrayscale = 'grayscale(' + (this.myCarousel.grayscale ? 1 * this.myCarousel.grayscale * this.percentAsDecimal : 0) + ')';
var fSepia = 'sepia(' + (this.myCarousel.sepia ? 1 * this.myCarousel.sepia * this.percentAsDecimal : 0) + ')';
var fBlur = 'blur(' + (this.myCarousel.blur ? this.myCarousel.blur * this.percentAsDecimal : 0) + 'px)';
var f = fOpacity + '-webkit-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + '-moz-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + '-ms-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + '-o-filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';' + 'filter:' + fGrayscale + ' ' + fSepia + ' ' + fBlur + ';';
this.items[i].style.cssText = p + f;
}
}
// turn
// Reset
}, {
key: 'reset',
value: function reset() {
// Carousel size
var carouselWidth = this.carousel.offsetWidth;
var carouselHeight = carouselWidth * this.myCarousel.perspective;
this.carousel.style.height = carouselHeight + 'px';
// Items size
var aspectPointWidth = this.items[0].offsetWidth;
var aspectPointHeight = this.items[0].offsetHeight;
var itemAspectRatio = aspectPointHeight / aspectPointWidth;
var itemWidthNum = carouselWidth * this.myCarousel.itemsPercentOf;
this.itemWidthAndHeight = 'width:' + itemWidthNum + 'px;height:auto;';
this.itemMargin = 'margin:-' + itemWidthNum * itemAspectRatio / 2 + 'px auto auto -' + itemWidthNum / 2 + 'px;';
// Math
this.widthRadius = carouselWidth / 2;
this.heightRadius = carouselHeight / 2;
this.degrees = [this.myCarousel.float === 'left' ? 360 : 0]; // Reset degrees and first elem
for (var i = 1; i < this.len; i++) {
this.degrees.push(this.myCarousel.float === 'left' ? 360 - Math.floor(i * this.incBy) : Math.floor(i * this.incBy));
}
// Position the items
this.turn(0);
}
// Hard reset
}, {
key: 'hardReset',
value: function hardReset() {
this.items = getElements(this.myCarousel.items);
this.len = this.items.length;
this.half = Math.ceil(this.len / 2);
this.incBy = 360 / this.len;
this.reset();
}
}]);
return Carousel3D;
})();
$(function () {
var myCarouselSetup = new CarouselSetup('.js-carousel1 ul', '.js-carousel1 li');
var carouselOne = new Carousel3D(myCarouselSetup);
carouselOne.hardReset();
var degree = 0;
// debugger;
var incrementBy = 360 / $(carouselOne.items).length;
var autorunCarousel = function autorunCarousel(period) {
var revolve = function revolve(period) {
degree += incrementBy;
carouselOne.run(degree);
};
setInterval(revolve, period);
};
autorunCarousel(3000);
});
// Default Settings
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment