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.) Arrow

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) {;

    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

Up next: Dots »