Famo.us slideshow with fade-in/slide/fade-out on each slide

SlideshowView.js

/*** SlideshowView ***/

// define this module in Require.JS
define(function(require, exports, module) {

    // Import additional modules to be used in this view 
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var ContainerSurface = require('famous/surfaces/ContainerSurface');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var RenderNode = require('famous/core/RenderNode');

    // Image data
    var SlideData = require('data/SlideData');

    // Individual element class
    var SlideView = require('views/SlideView');

    // Constructor function for our SlideshowView class
    function SlideshowView() {
        // Applies View's constructor function to SlideshowView class
        View.apply(this, arguments);

        this.currentImage = 0;

        _createImages.call(this);
    }

    // Establishes prototype chain for SlideshowView class to inherit from View
    SlideshowView.prototype = Object.create(View.prototype);
    SlideshowView.prototype.constructor = SlideshowView;

    // Default options for SlideshowView class
    SlideshowView.DEFAULT_OPTIONS = {};

    // Define your helper functions and prototype methods here
    SlideshowView.prototype.showSlide = function(slideIndex) {
        slideIndex = slideIndex % SlideData.imageURLs.length;
        var slideView = new SlideView(SlideData.imageURLs[slideIndex]);

        // Trigger the next slide in the slideshow
        slideView.on('done', function(event) {
            this.showSlide(slideIndex + 1)
        }.bind(this));
        this.renderNode.set(slideView);
    };

    function _createImages() {    
        var container = new ContainerSurface({
            size: [1024, 300],
            properties: {
                overflow: 'hidden'
            }
        });

        // Black background behind photos
        this.add(new Surface({
            size: [undefined, undefined],
            classes: ["black-bg"]
        }));

        // RenderNode for swapping content
        this.renderNode = new RenderNode();
        container.add(this.renderNode);

        this.showSlide(0);

        this.add(new Modifier({
            transform: Transform.translate(0,0,1),
            origin: [0.5,0.5]
        })).add(container);
    }

    module.exports = SlideshowView;
});

SlideView.js

/*** SlideView ***/

// define this module in Require.JS
define(function(require, exports, module) {

    // Import additional modules to be used in this view 
    var View = require('famous/core/View');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var Transform = require('famous/core/Transform');
    var Modifier = require('famous/core/Modifier');
    var Transitionable = require("famous/transitions/Transitionable");

    // Constructor function for our SlideView class
    function SlideView(image) {

        // Applies View's constructor function to SlideView class
        View.apply(this, arguments);

        // Constants
        this.startOffset        = -150;
        this.endOffset          = -300;
        this.fadeInDuration     = 1000;
        this.slideDuration      = 5000;
        this.fadeOutDuration    = 1000;
        this.imageName          = image;

        _createImage.call(this);
    }

    // Establishes prototype chain for SlideView class to inherit from View
    SlideView.prototype = Object.create(View.prototype);
    SlideView.prototype.constructor = SlideView;

    // Default options for SlideView class
    SlideView.DEFAULT_OPTIONS = {};

    // Define your helper functions and prototype methods here
    SlideView.prototype.fadeIn = function() {
        var faderTrans = new Transitionable(0.0);
        faderTrans.set(
            1.0,
            {
                duration: this.fadeInDuration
            },
            this.slide.bind(this)
        );

        this.dynamicModifier.opacityFrom(function() {
            return faderTrans.get();
        });
    };

    SlideView.prototype.slide = function() {
        var slideTrans = new Transitionable(0);
        slideTrans.set(
            this.endOffset - this.startOffset,
            {
                duration: this.slideDuration,
                curve: 'easeInOut'
            },
            this.fadeOut.bind(this)
        );

        this.dynamicModifier.transformFrom(function() {
            return Transform.translate(0, slideTrans.get(), 0);
        });
    };

    SlideView.prototype.fadeOut = function() {
        var faderTrans = new Transitionable(1.0);
        faderTrans.set(
            0.0,
            {
                duration: this.fadeOutDuration
            },
            this.slideDone.bind(this)
        );

        this.dynamicModifier.opacityFrom(function() {
            return faderTrans.get();
        });
    };

    SlideView.prototype.slideDone = function() {
        this._eventOutput.emit('done', this.imageName);
    };

    function _createImage() {
        var imageSurface = new ImageSurface({
                size: [1024, 700]
            });
        imageSurface.setContent(this.imageName);

        // Initial translation from which later transitions take place
        var posModifier = new Modifier({
            transform: Transform.translate(0, this.startOffset, 0)
        });

        this.dynamicModifier = new Modifier();
        this.add(posModifier).add(this.dynamicModifier).add(imageSurface);
        this.fadeIn();
    };

    module.exports = SlideView;
});

@ohookins here is a jsfiddle of the above code 👍
http://jsfiddle.net/talves/9dGv2/
Let me know if you want it on famousco.de or you can do it.
Great idea, by the way!