Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 10, 2016 20:08
Show Gist options
  • Save anonymous/60f82f7b52c312962054e24ea6809ece to your computer and use it in GitHub Desktop.
Save anonymous/60f82f7b52c312962054e24ea6809ece to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/webewob
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
* {
box-sizing: border-box;
}
html, body {
width: 100%;
}
.carousel {
height: 100px;
width: 100%;
}
.arrow {
cursor: pointer;
float: left;
width: 8.3333%;
}
.arrow.right {
padding-left: 10px;
}
.list {
width: 83.3333%;
white-space: nowrap;
overflow-x: hidden;
float: left;
}
.list-container {
transition: transform .3s cubic-bezier(.465,.183,.153,.946);
}
.item {
cursor: pointer;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
margin: 0 5px;
}
</style>
</head>
<body data-ng-app="app" data-ng-controller="ctrl as ctrl">
<div class="carousel">
<div class="arrow left"> < </div>
<div class="list">
<div class="list-container">
<div data-ng-repeat="item in ctrl.values" class="item"></div>
</div>
</div>
<div class="arrow right"> > </div>
</div>
<button data-ng-click="ctrl.add()">Add</button>
<script id="jsbin-javascript">
var listContainer = document.querySelector('.list-container');
var containerWidth = listContainer.clientWidth;
var SIZE = 88;
var left = document.querySelector('.arrow.left');
var right = document.querySelector('.arrow.right');
var current = {
index: 0,
position: 0
};
left.addEventListener('click', function () {
if (!current.index) {
return;
}
current.index--;
current.position += SIZE;
requestAnimationFrame(function() {
listContainer.style.transform = getTransform(current.position);
});
});
right.addEventListener('click', function () {
var allItens = listContainer.querySelectorAll('.item');
if (current.index === (allItens.length - 1)) {
return;
}
current.index++;
current.position -= SIZE;
requestAnimationFrame(function() {
listContainer.style.transform = getTransform(current.position);
});
});
function getTransform(px) {
return 'translateX(' + px + 'px)';
}
/**
* Angular
*/
angular.module('app', [])
.controller('ctrl', function () {
var vm = this;
vm.values = [{}, {}];
vm.add = function () {
vm.values.push({});
};
});
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
}
html, body {
width: 100%;
}
.carousel {
height: 100px;
width: 100%;
}
.arrow {
cursor: pointer;
float: left;
width: 8.3333%;
}
.arrow.right {
padding-left: 10px;
}
.list {
width: 83.3333%;
white-space: nowrap;
overflow-x: hidden;
float: left;
}
.list-container {
transition: transform .3s cubic-bezier(.465,.183,.153,.946);
}
.item {
cursor: pointer;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
margin: 0 5px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var listContainer = document.querySelector('.list-container');
var containerWidth = listContainer.clientWidth;
var SIZE = 88;
var left = document.querySelector('.arrow.left');
var right = document.querySelector('.arrow.right');
var current = {
index: 0,
position: 0
};
left.addEventListener('click', function () {
if (!current.index) {
return;
}
current.index--;
current.position += SIZE;
requestAnimationFrame(function() {
listContainer.style.transform = getTransform(current.position);
});
});
right.addEventListener('click', function () {
var allItens = listContainer.querySelectorAll('.item');
if (current.index === (allItens.length - 1)) {
return;
}
current.index++;
current.position -= SIZE;
requestAnimationFrame(function() {
listContainer.style.transform = getTransform(current.position);
});
});
function getTransform(px) {
return 'translateX(' + px + 'px)';
}
/**
* Angular
*/
angular.module('app', [])
.controller('ctrl', function () {
var vm = this;
vm.values = [{}, {}];
vm.add = function () {
vm.values.push({});
};
});
</script></body>
</html>
Raw
jsbin.webewob.css
* {
box-sizing: border-box;
}
html, body {
width: 100%;
}
.carousel {
height: 100px;
width: 100%;
}
.arrow {
cursor: pointer;
float: left;
width: 8.3333%;
}
.arrow.right {
padding-left: 10px;
}
.list {
width: 83.3333%;
white-space: nowrap;
overflow-x: hidden;
float: left;
}
.list-container {
transition: transform .3s cubic-bezier(.465,.183,.153,.946);
}
.item {
cursor: pointer;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
margin: 0 5px;
}
Raw
jsbin.webewob.js
var listContainer = document.querySelector('.list-container');
var containerWidth = listContainer.clientWidth;
var SIZE = 88;
var left = document.querySelector('.arrow.left');
var right = document.querySelector('.arrow.right');
var current = {
index: 0,
position: 0
};
left.addEventListener('click', function () {
if (!current.index) {
return;
}
current.index--;
current.position += SIZE;
requestAnimationFrame(function() {
listContainer.style.transform = getTransform(current.position);
});
});
right.addEventListener('click', function () {
var allItens = listContainer.querySelectorAll('.item');
if (current.index === (allItens.length - 1)) {
return;
}
current.index++;
current.position -= SIZE;
requestAnimationFrame(function() {
listContainer.style.transform = getTransform(current.position);
});
});
function getTransform(px) {
return 'translateX(' + px + 'px)';
}
/**
* Angular
*/
angular.module('app', [])
.controller('ctrl', function () {
var vm = this;
vm.values = [{}, {}];
vm.add = function () {
vm.values.push({});
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment