-
-
Save HenriqueLimas/24e476b82b54f021215b0196caa7c1f6 to your computer and use it in GitHub Desktop.
Carousel http://jsbin.com/webewob
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function createCarousel({itens}) { | |
| 'use strict'; | |
| const SIZE = 88; | |
| const current = { | |
| index: 0, | |
| position: 0 | |
| }; | |
| let carousel = document.createElement('div'); | |
| let list = document.createElement('div'); | |
| let listContainer = document.createElement('div'); | |
| let leftArrow = document.createElement('div'); | |
| let rightArrow = document.createElement('div'); | |
| carousel.classList.add('carousel'); | |
| list.classList.add('list'); | |
| listContainer.classList.add('list-container'); | |
| leftArrow.classList.add('arrow'); | |
| leftArrow.classList.add('left'); | |
| rightArrow.classList.add('arrow'); | |
| rightArrow.classList.add('right'); | |
| leftArrow.addEventListener('click', function () { | |
| if (!current.index) { | |
| return; | |
| } | |
| current.index--; | |
| current.position += SIZE; | |
| requestAnimationFrame(function () { | |
| listContainer.style.transform = _getTransform(current.position); | |
| }); | |
| }); | |
| rightArrow.addEventListener('click', function () { | |
| var listItens = listContainer.querySelectorAll('.carousel-list__item'); | |
| if (current.index === (listItens.length - 1)) { | |
| return; | |
| } | |
| current.index++; | |
| current.position -= SIZE; | |
| requestAnimationFrame(function () { | |
| listContainer.style.transform = _getTransform(current.position); | |
| }); | |
| }); | |
| if (itens instanceof Array) { | |
| listContainer = itens | |
| .map(_createItem) | |
| .reduce(function (listContainer, element) { | |
| listContainer.appendChild(element); | |
| return listContainer; | |
| }, listContainer); | |
| } | |
| list.appendChild(listContainer); | |
| carousel.appendChild(leftArrow); | |
| carousel.appendChild(list); | |
| carousel.appendChild(rightArrow); | |
| return listContainer; | |
| function _createItem(item) { | |
| let element = document.createElement('div'); | |
| element.classList.add('carousel-list__item'); | |
| element.innerHTML = item.content; | |
| return element; | |
| } | |
| function _getTransform(px) { | |
| return 'translateX(' + px + 'px)'; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| </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> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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