The Pager is the element that holds the display images. Architecturally, it will also hold most of the carousel's browsing logic.


The images on display will be represented by a collection of imageNodes. To give our app a realistic feel, we will animate the imageNode elements using Famous' built-in physics engine.

Let's set up our Pager class and the imageNodes before adding the physics-based animation. Paste the code below into the file Pager.js, and then uncomment all references to Pager included in Carousel.js.

 * Pager.js
 var DOMElement = require('famous/dom-renderables/DOMElement');
 var PhysicsEngine = require('famous/physics/PhysicsEngine'); // To use later...

 function Pager (node, options) {
     this.node = node;
     this.currentIndex = 0;
     this.threshold = 4000;
     this.pageWidth = 0;

     this.pages =, node, options.pageData);

 Pager.prototype.defineWidth = function(size){
   this.pageWidth = size[0];

 function _createPages(root, pageData) {
     var pages = [];

     for (var i = 0; i < pageData.length; i++) {
         var imageNode = root.addChild();

         imageNode.setAbsoluteSize(500, 500, 0);
         imageNode.setAlign(0.5, 0.5);
         imageNode.setMountPoint(0.5, 0.5);
         imageNode.setOrigin(0.5, 0.5);

         var el = new DOMElement(imageNode);
         el.setProperty('backgroundImage', 'url(' + pageData[i] + ')');
         el.setProperty('background-repeat', 'no-repeat');
         el.setProperty('background-size', 'cover');


     return pages;

 module.exports = Pager;

Notice how we use the external private function _createPages to construct and return an array of imageNodes instead of using a new class for each node. This shows that classes aren't a necessity for Famous; using them is up to our discretion as developers.

Finding the width

Similar to our Dots, let's get the width using an onSizeChange method on a resize component for the Pager. This value will come into play later when we want to position our imageNodes off the screen.

var resizeComponent = {
    onSizeChange: function(x, y, z) {

Add the lines above inside the Pager constructor. Refer back to the previous Dots steps if you need a refresher on the onSizeChange method.

Modified files: Pager.js | Carousel.js

Section recap: Code for this step

Up next: Animating with physics »