Arrows
To handle rendering of the next/previous navigation arrows for the carousel, we'll create an Arrow
class. (This is one of the three modules that will be required by our Carousel.js
file.)
All of our child element classes (Arrows
, Dots
, Pager
) will take a node
and options
object as constructor parameters.
Save the code below into the file Arrow.js
, and then uncomment all references to Arrow
in Carousel.js
, including the require()
statement at top and calls to this.arrow in _positionComponents
.
/**
* Arrow.js
*/
var DOMElement = require('famous/dom-renderables/DOMElement');
var Node = require('famous/core/Node');
function Arrow(options) {
Node.call(this);
this.el = new DOMElement(this);
this.el.setProperty('color', 'white')
this.direction = options.direction;
this.el.setContent(this.direction === 1 ? '>' : '<');
this.el.setProperty('fontSize', '40px');
this.el.setProperty('lineHeight', '40px');
this.el.setProperty('cursor', 'pointer');
this.el.setProperty('textHighlight', 'none');
this.el.setProperty('zIndex', '2');
}
Arrow.prototype = Object.create(Node.prototype);
Arrow.prototype.constructor = Arrow;
module.exports = Arrow;
Note the two interesting things here: how options
are passed down as a parameter and how the Arrow
class extends Node
. This allows for us to save reference of the options
within the constructor and extend Node
so that we can decorate it with properties and components. However, as we mentioned before, we recommend managing layout (size, position) from the parent.
Modified files: Arrow.js | Carousel.js
Section recap: Code for this step