ember-slide-show

ember-slide-show

ember-slide-show is a simple Ember CLI addon that can be used to add a slideshow to your ember app.

View demo

Installing

ember install:addon ember-slide-show

Using in your app

Use the slide-show component in your template:

{{slide-show slideIndex=slideIndex slides=slides}}

// slideIndex should be bound to a query_param variable so you can keep state
// slides is an array of strings - each the name of a template in the slide-show/ directory

Your controller would look something like this:

import Ember from "ember";
import SlideShowController from "ember-slide-show/mixins/slide-show-controller";

export default Ember.Controller.extend(SlideShowController, {

    // the slides are the content in this simple app
    slides: function () {
        return this.get("content");
    }.property("content")
});

The slides (each one a separate handlebars template) can be provided any way you like; this example provides them via the route:

import Ember from 'ember';

var SLIDES = [
    "welcome",
    "outline",
    "why-ember",
    "chuck-norris",
    "end"
];

export default Ember.Route.extend({

    model: function () {
        return SLIDES;
    }
});

The convention for ember-slide-show is to look for slides in the templates/slide-show directory.

templates
    slide-show
        -chuck-norris.hbs
        -end.hbs
        -outline.hbs
        -welcome.hbs
        -why-ember.hbs

You can create a new slide by invoking the slide generator:

ember generate slide slideName

License

ember-slide-show is released under the MIT license.