diff --git a/README.md b/README.md
index d479920..e196f4a 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,172 @@
-# Ember-cli-bootstrap3-carousel
+# ember-cli-bootstrap3-carousel [![GitHub version](http://badge.fury.io/gh/cybertoothca%2Fember-cli-bootstrap3-carousel.svg)](http://badge.fury.io/gh/cybertoothca%2Fember-cli-bootstrap3-carousel) ![](http://embadge.io/v1/badge.svg?start=2.3.0)
 
-This README outlines the details of collaborating on this Ember addon.
+[![npm version](http://badge.fury.io/js/ember-cli-bootstrap3-carousel.svg)](http://badge.fury.io/js/ember-cli-bootstrap3-carousel) [![CircleCI](http://circleci.com/gh/cybertoothca/ember-cli-bootstrap3-carousel.svg?style=shield)](http://circleci.com/gh/cybertoothca/ember-cli-bootstrap3-carousel) [![Code Climate](http://codeclimate.com/github/cybertoothca/ember-cli-bootstrap3-carousel/badges/gpa.svg)](http://codeclimate.com/github/cybertoothca/ember-cli-bootstrap3-carousel) ![Dependencies](http://david-dm.org/cybertoothca/ember-cli-bootstrap3-carousel.svg) [![ember-observer-badge](http://emberobserver.com/badges/ember-cli-bootstrap3-carousel.svg)](http://emberobserver.com/addons/ember-cli-bootstrap3-carousel) [![License](http://img.shields.io/npm/l/ember-cli-bootstrap3-carousel.svg)](LICENSE.md)
+
+This addon can create a basic Bootstrap3 carousel that can lazy-load images.  See the
+[Bootstrap3 Carousel](http://getbootstrap.com/javascript/#carousel) documentation for additional information.
+
+## Demo
+
+The demonstration web application can be found here:
+[http://ember-cli-bootstrap3-carousel.cybertooth.io/](http://ember-cli-bootstrap3-carousel.cybertooth.io/). 
+
+## What Does This Addon Do?
+
+This addon supplies the following _components_:
+
+* `twbs-carousel` - a container-like element for the carousel's slides.
+* `twbs-carousel/slide` - a component representing a slide that is nested 
+inside a `twbs-carousel`.
+* `twbs-carousel/slide/img` - a component generating an html `<img>` tag
+that has the ability to be lazily loaded by the carousel's slide event.
+
+The following _mixin_ also ships with this addon:
+
+* `Carousel` - imported as `import Carousel as 'ember-cli-bootstrap3-carousel/mixins/carousel'` and includes all 
+of the carousel options as found in the [Bootstrap documentation](http://getbootstrap.com/javascript/#carousel-options).
+
+_Further information about these items can be found in the Usage section below._
+
+## Requirements
+
+* **Ember >= 2.3.0**: This addon uses the [hash helper](http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_hash-helper) which was introduced in Ember-2.3.0.
+* Ember CLI
+* You must have Bootstrap 3.x installed in your Ember application.  Feel free to use the
+  [ember-cli-bootstrap3-sass](http://emberobserver.com/addons/ember-cli-bootstrap3-sass)
+  addon to setup Bootstrap if you haven't already done so.
 
 ## Installation
 
-* `git clone <repository-url>` this repository
-* `cd ember-cli-bootstrap3-carousel`
+The following will install this addon:
+
+    $ ember install ember-cli-bootstrap3-carousel
+
+__As mentioned, you must install Bootstrap3 along with the tooltip plugin.  See the requirements section above.__
+
+### Upgrading
+
+When working through the Ember upgrade process, I recommend
+invoking the `ember install ember-cli-bootstrap3-carousel` command once
+you are done to get the latest version of the addon.
+
+## Usage
+
+As mentioned above there are several examples on the demonstration site:
+[http://ember-cli-bootstrap3-carousel.cybertooth.io/](http://ember-cli-bootstrap3-carousel.cybertooth.io/)
+
+### Components
+
+#### `{{twbs-carousel}}`
+
+A component that creates the `<div class="carousel>` element.
+
+The reason this addon requires **Ember-2.3.0+** is because this particular component uses the _hash_ helper.
+
+##### Arguments
+
+* _All of the properties listed in the `Carousel` mixin_.
+* `onSlide` - the property that accepts an action closure hooked to the bootstrap `slide.bs.carousel` event.
+* `onSlid` - the property that accepts an action closure hooked to the bootstrap `slid.bs.carousel` event.
+
+([Check out the demo...](http://ember-cli-bootstrap3-carousel.cybertooth.io/))
+
+
+#### `{{twbs-carousel/slide}}`
+
+##### Arguments
+
+
+#### `{{twbs-carousel/slide/img}}`
+
+
+##### Arguments
+
+### Mixins
+
+#### `Carousel`
+
+A mixin that provides access to all of the Bootstrap carousel options as found
+here: [http://getbootstrap.com/javascript/#carousel-options](http://getbootstrap.com/javascript/#carousel-options)
+
+##### Properties
+
+* `interval` - **Default** `5000`
+* `keyboard?` (aliased to `keyboard`) - **Default** `true`
+* `pause` - **Default** `"hover"`
+* `wrap?` (aliased to `wrap`) - **Default** `true`
+
+##### Methods
+
+* `computedOptions()` - returns a hash containing the options from this mixin
+that are used to initialize the Bootstrap popover.
+
+### Troubleshooting And Tips
+
+1. Ember-2.3.0+ is required because this addon uses the _hash_ helper.
+1. Bootstrap3 CSS and the tooltip Javascript plugin must be installed.
+
+---
+
+# Ember Addon Building And Testing
+
+## Setup
+
+* `git clone git@github.com:cybertoothca/ember-cli-bootstrap3-carousel.git`
 * `npm install`
 * `bower install`
 
-## Running
+## Running The Dummy Application
 
-* `ember serve`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
+* `ember server`
+* Visit your app at http://localhost:4200.
 
-## Running Tests
+## Running Addon Tests
 
-* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
+* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
 * `ember test`
 * `ember test --server`
 
-## Building
+## Building The Addon
 
 * `ember build`
 
 For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).
+
+# Linking This Addon For Local Testing
+
+## Linking
+
+1. From the command line at the root of __this__ project run the
+`npm link` command to _link_ this addon within your local
+node repository.
+1. From the _other_ Ember project that you wish to test this addon
+in, execute the following command:
+`npm link ember-cli-bootstrap3-carousel`.
+1. Now in that same _other_ Ember project, you should go into the
+`package.json` and add the ember addon with the version _*_.  It will
+look something like this: `"ember-cli-bootstrap3-carousel": "*"`.  Now
+when/if you execute `npm install` on this _other_ project it
+will know to look for the linked addon rather than fetch it from
+the central repository.
+
+## Unlinking
+
+1. Remove the addon from your local node repository with the following
+command (that can be run anywhere):
+`npm uninstall -g ember-cli-bootstrap3-carousel`
+1. Remove the reference to the `ember-cli-bootstrap3-carousel`
+in your _other_ project's `package.json`.
+1. Run an `npm prune` and `bower prune` from the root of your _other_ project's command line.
+
+# Deploying The Dummy Application
+
+Make sure your `~/.aws/credentials` file has a profile named _cybertooth_ 
+with a valid key and secret,
+
+    [cybertooth]
+    aws_access_key_id = <KEY>
+    aws_secret_access_key = <SECRET>
+
+Deploy by invoking the following command: `ember deploy production`
+
+Confirm your changes are showing up in our S3 container: http://ember-cli-bootstrap3-carousel.cybertooth.io/
diff --git a/addon/components/twbs-carousel.js b/addon/components/twbs-carousel.js
new file mode 100644
index 0000000..98db692
--- /dev/null
+++ b/addon/components/twbs-carousel.js
@@ -0,0 +1,40 @@
+import Carousel from '../mixins/carousel';
+import Ember from 'ember';
+import layout from '../templates/components/twbs-carousel';
+
+export default Ember.Component.extend(Carousel, {
+  actions: {
+    registerSlideComponent(slide) {
+      this.get('_slides').pushObject(slide);
+      return true;
+    }
+  },
+  /**
+   * Add the slide class?
+   */
+  classNames: ['carousel'],
+  init() {
+    this._super(...arguments);
+    this.set('_slides', Ember.A());
+  },
+  layout,
+  tagName: 'div',
+  _initializeCarousel: Ember.on('didInsertElement', function () {
+    this.$()
+      .carousel(this.get('computedOptions'))
+      /**
+       * When the carousel slides, check if the target it is sliding to needs its image loaded.
+       */
+      .on('slide.bs.carousel', (event) => {
+        this.get('_slides')
+          .find((slide) => {
+            return slide.get('elementId') === Ember.get(event, 'relatedTarget.id');
+          })
+          .send('loadImg');
+      });
+  }),
+  /**
+   * Initialized to an Ember.Array in `init()`.
+   */
+  _slides: undefined
+});
diff --git a/addon/components/twbs-carousel/slide.js b/addon/components/twbs-carousel/slide.js
new file mode 100644
index 0000000..8b538b2
--- /dev/null
+++ b/addon/components/twbs-carousel/slide.js
@@ -0,0 +1,34 @@
+import Ember from 'ember';
+import layout from '../../templates/components/twbs-carousel/slide';
+
+export default Ember.Component.extend({
+  actions: {
+    loadImg() {
+      if (this.get('_imgComponent')) {
+        this.get('_imgComponent').send('loadImg');
+      }
+      return true;
+    },
+    registerImgComponent(imgComponent) {
+      this.set('_imgComponent', imgComponent);
+      return true;
+    }
+  },
+  classNames: ['twbs-carousel-slide', 'item'],
+  layout,
+  /**
+   * The closure function to invoke when initialized.
+   */
+  register: undefined,
+  tagName: 'div',
+  /**
+   * THIS carousel "slide" (or "item") will need to know about any `twbs-carousel/slide/img` because if they are lazy-
+   * loaded their `src` must be toggled to the supplied lazy url.
+   */
+  _imgComponent: undefined,
+  _invokeRegister: Ember.on('init', function () {
+    if (Ember.isPresent(this.get('register'))) {
+      this.get('register')(this);
+    }
+  })
+});
diff --git a/addon/components/twbs-carousel/slide/img.js b/addon/components/twbs-carousel/slide/img.js
new file mode 100644
index 0000000..c32ed2f
--- /dev/null
+++ b/addon/components/twbs-carousel/slide/img.js
@@ -0,0 +1,40 @@
+import Ember from 'ember';
+import layout from '../../../templates/components/twbs-carousel/slide/img';
+
+export default Ember.Component.extend({
+  actions: {
+    loadImg() {
+      if (Ember.isBlank(this.get('src'))) {
+        Ember.Logger.debug('The lazy-image prescribed in a `twbs-carousel/slide/img` component is now being loaded.');
+        this.set('src', this.get('lazy'));
+        return true;
+      }
+      return false;
+    }
+  },
+  attributeBindings: ['alt', 'crossorigin', 'height', 'ismap', 'longdesc',
+    'size', 'src', 'srcset', 'tabindex', 'title', 'usemap', 'width'],
+  classNames: ['twbs-carousel-slide-img'],
+  /**
+   * REQUIRED.
+   */
+  lazy: undefined,
+  layout,
+  /**
+   * The closure function (action) to call when this `twbs-carousel/slide/img` is inserted.
+   */
+  register: undefined,
+  /**
+   * REQUIRED.
+   */
+  src: undefined,
+  tagName: 'img',
+  _invokeRegister: Ember.on('init', function () {
+    if (Ember.isPresent(this.get('register'))) {
+      this.get('register')(this);
+    } else {
+      Ember.Logger
+        .warn('The `twbs-carousel/slide/img` component should have an action assigned to its `register` property.');
+    }
+  })
+});
diff --git a/addon/mixins/carousel.js b/addon/mixins/carousel.js
new file mode 100644
index 0000000..25aaca6
--- /dev/null
+++ b/addon/mixins/carousel.js
@@ -0,0 +1,39 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  /**
+   * The amount of time to delay between automatically cycling an item. If `false`, carousel will not automatically
+   * cycle.
+   * @default 5000 (milliseconds).
+   * @see http://getbootstrap.com/javascript/#carousel-options
+   */
+  interval: 5000,
+  keyboard: Ember.computed.readOnly('keyboard?'),
+  /**
+   * Whether the carousel should react to keyboard events.
+   * @default true;
+   * @see http://getbootstrap.com/javascript/#carousel-options
+   */
+  'keyboard?': true,
+  /**
+   * If set to `hover`, pauses the cycling of the carousel on mouseenter and resumes the cycling of the
+   * carousel on mouseleave. If set to `null`, hovering over the carousel won't pause it.
+   * @default 'hover'.
+   * @see http://getbootstrap.com/javascript/#carousel-options
+   */
+  pause: 'hover',
+  wrap: Ember.computed.readOnly('wrap?'),
+  /**
+   * Whether the carousel should cycle continuously or have hard stops.
+   * @default true
+   * @see http://getbootstrap.com/javascript/#carousel-options
+   */
+  'wrap?': true,
+  /**
+   * The computed `options` that can be supplied to the `carousel` initialization.
+   * @see http://getbootstrap.com/javascript/#carousel-options-1
+   */
+  computedOptions: Ember.computed('interval', 'keyboard?', 'pause', 'wrap?', function () {
+    return this.getProperties('interval', 'keyboard', 'pause', 'wrap');
+  })
+});
diff --git a/addon/templates/components/twbs-carousel.hbs b/addon/templates/components/twbs-carousel.hbs
new file mode 100644
index 0000000..ce0ceb3
--- /dev/null
+++ b/addon/templates/components/twbs-carousel.hbs
@@ -0,0 +1,13 @@
+<div class="carousel-inner" role="listbox">
+  {{yield
+    (hash slide=(component "twbs-carousel/slide" register=(action "registerSlideComponent")))
+  }}
+</div>
+<a class="left carousel-control" href="#{{elementId}}" role="button" data-slide="prev">
+  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+  <span class="sr-only">Previous</span>
+</a>
+<a class="right carousel-control" href="#{{elementId}}" role="button" data-slide="next">
+  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+  <span class="sr-only">Next</span>
+</a>
\ No newline at end of file
diff --git a/addon/templates/components/twbs-carousel/slide.hbs b/addon/templates/components/twbs-carousel/slide.hbs
new file mode 100644
index 0000000..7ff5a34
--- /dev/null
+++ b/addon/templates/components/twbs-carousel/slide.hbs
@@ -0,0 +1 @@
+{{yield (hash img=(component "twbs-carousel/slide/img" register=(action "registerImgComponent")))}}
diff --git a/addon/templates/components/twbs-carousel/slide/img.hbs b/addon/templates/components/twbs-carousel/slide/img.hbs
new file mode 100644
index 0000000..889d9ee
--- /dev/null
+++ b/addon/templates/components/twbs-carousel/slide/img.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/app/components/twbs-carousel.js b/app/components/twbs-carousel.js
new file mode 100644
index 0000000..21eba44
--- /dev/null
+++ b/app/components/twbs-carousel.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel';
\ No newline at end of file
diff --git a/app/components/twbs-carousel/slide.js b/app/components/twbs-carousel/slide.js
new file mode 100644
index 0000000..6aacd0b
--- /dev/null
+++ b/app/components/twbs-carousel/slide.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/slide';
\ No newline at end of file
diff --git a/app/components/twbs-carousel/slide/img.js b/app/components/twbs-carousel/slide/img.js
new file mode 100644
index 0000000..5ea8910
--- /dev/null
+++ b/app/components/twbs-carousel/slide/img.js
@@ -0,0 +1 @@
+export { default } from 'ember-cli-bootstrap3-carousel/components/twbs-carousel/slide/img';
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 89d1b20..b23b487 100644
--- a/bower.json
+++ b/bower.json
@@ -2,6 +2,8 @@
   "name": "ember-cli-bootstrap3-carousel",
   "dependencies": {
     "ember": "~2.9.0",
-    "ember-cli-shims": "0.1.3"
+    "ember-cli-shims": "0.1.3",
+    "bootstrap-sass": "^3.3.7",
+    "font-awesome": "^4.7.0"
   }
 }
diff --git a/config/deploy.js b/config/deploy.js
new file mode 100644
index 0000000..362e5cb
--- /dev/null
+++ b/config/deploy.js
@@ -0,0 +1,33 @@
+/* jshint node: true */
+
+module.exports = function (deployTarget) {
+  var ENV = {
+    build: {},
+    s3: {
+      bucket: 'ember-cli-bootstrap3-carousel.cybertooth.io',
+      filePattern: '**/*.{js,css,png,gif,ico,jpg,map,xml,txt,svg,swf,eot,ttf,woff,woff2,otf,html}',
+      profile: 'cybertooth',
+      region: 'us-west-2'
+    }
+  };
+
+  if (deployTarget === 'development') {
+    ENV.build.environment = 'development';
+    // configure other plugins for development deploy target here
+  }
+
+  if (deployTarget === 'staging') {
+    ENV.build.environment = 'production';
+    // configure other plugins for staging deploy target here
+  }
+
+  if (deployTarget === 'production') {
+    ENV.build.environment = 'production';
+    // configure other plugins for production deploy target here
+  }
+
+  // Note: if you need to build some configuration asynchronously, you can return
+  // a promise that resolves with the ENV object instead of returning the
+  // ENV object synchronously.
+  return ENV;
+};
diff --git a/package.json b/package.json
index 2e532e6..e50ea21 100644
--- a/package.json
+++ b/package.json
@@ -22,13 +22,18 @@
     "ember-ajax": "^2.4.1",
     "ember-cli": "2.9.1",
     "ember-cli-app-version": "^2.0.0",
+    "ember-cli-bootstrap3-sass": "1.0.6",
     "ember-cli-dependency-checker": "^1.3.0",
-    "ember-cli-htmlbars": "^1.0.10",
-    "ember-cli-htmlbars-inline-precompile": "^0.3.3",
+    "ember-cli-deploy": "1.0.0-beta.2",
+    "ember-cli-deploy-build": "0.1.1",
+    "ember-cli-deploy-gzip": "0.2.4",
+    "ember-cli-deploy-s3": "0.4.0",
+    "ember-cli-font-awesome-sass": "1.0.4",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-jshint": "^1.0.4",
     "ember-cli-qunit": "^3.0.1",
     "ember-cli-release": "^0.2.9",
+    "ember-cli-sass": "6.1.1",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
@@ -37,14 +42,15 @@
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
-    "ember-welcome-page": "^1.0.3",
     "loader.js": "^4.0.10"
   },
   "keywords": [
     "ember-addon"
   ],
   "dependencies": {
-    "ember-cli-babel": "^5.1.7"
+    "ember-cli-babel": "^5.1.7",
+    "ember-cli-htmlbars": "^1.0.10",
+    "ember-cli-htmlbars-inline-precompile": "^0.3.3"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"
diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
index 5120bd7..1f7f161 100644
--- a/tests/dummy/app/index.html
+++ b/tests/dummy/app/index.html
@@ -1,25 +1,27 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Dummy</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>ember-cli-bootstrap3-carousel</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    {{content-for "head"}}
+  {{content-for "head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
+  <!-- TODO: hacked the google fonts here because of SASS @import issues in PhantomJs -->
+  <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Raleway:700" rel="stylesheet">
+  <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+  <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
 
-    {{content-for "head-footer"}}
-  </head>
-  <body>
-    {{content-for "body"}}
+  {{content-for "head-footer"}}
+</head>
+<body>
+{{content-for "body"}}
 
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/dummy.js"></script>
+<script src="{{rootURL}}assets/vendor.js"></script>
+<script src="{{rootURL}}assets/dummy.js"></script>
 
-    {{content-for "body-footer"}}
-  </body>
+{{content-for "body-footer"}}
+</body>
 </html>
diff --git a/tests/dummy/app/routes/application.js b/tests/dummy/app/routes/application.js
new file mode 100644
index 0000000..096e3c5
--- /dev/null
+++ b/tests/dummy/app/routes/application.js
@@ -0,0 +1,3 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({});
diff --git a/tests/dummy/app/routes/index.js b/tests/dummy/app/routes/index.js
new file mode 100644
index 0000000..096e3c5
--- /dev/null
+++ b/tests/dummy/app/routes/index.js
@@ -0,0 +1,3 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({});
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
new file mode 100644
index 0000000..8f96234
--- /dev/null
+++ b/tests/dummy/app/styles/app.scss
@@ -0,0 +1,26 @@
+//noinspection CssUnknownTarget
+@import 'ember-cli-bootstrap3-variables.scss';
+
+// TODO: can't @import fonts because PhantomJS get's angry
+$font-family-serif: lato, $font-family-serif;
+$headings-font-family: Raleway, $font-family-base;
+$navbar-default-bg: lighten($brand-warning, 10%);
+$navbar-default-link-hover-bg: lighten($brand-warning, 7%);
+$navbar-default-link-active-bg: lighten($brand-warning, 3%);
+
+//noinspection CssUnknownTarget
+@import 'ember-cli-bootstrap3-sass';
+//noinspection CssUnknownTarget
+@import 'ember-cli-bootstrap3-theme';
+
+//noinspection CssUnknownTarget
+@import "ember-cli-font-awesome-sass";
+
+body {
+  padding-top: 70px;
+  margin-bottom: 50%;
+}
+
+h3 {
+  margin-top: 3rem;
+}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
new file mode 100644
index 0000000..bac96cf
--- /dev/null
+++ b/tests/dummy/app/templates/application.hbs
@@ -0,0 +1,66 @@
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
+              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      {{#link-to "index" classNames="navbar-brand"}}
+        ember-cli-bootstrap3-carousel
+      {{/link-to}}
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+             aria-expanded="false">
+            Other Projects <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a href="http://ember-cli-bootstrap3-popover.cybertooth.io/" target="_blank">
+                ember-cli-bootstrap3-popover
+              </a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="http://ember-cli-marked-down.cybertooth.io/" target="_blank">
+                ember-cli-marked-down
+              </a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="http://ember-cli-textarea-autosize.cybertooth.io/" target="_blank">
+                ember-cli-textarea-autosize
+              </a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="http://ember-data-bootstrap3-forms.cybertooth.io/" target="_blank">
+                ember-data-bootstrap3-forms
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href="https://github.com/cybertoothca/ember-cli-bootstrap3-carousel" target="_blank">
+            <i class="fa fa-github"></i>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://www.npmjs.com/package/ember-cli-bootstrap3-carousel" target="_blank">
+            npm
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+{{outlet}}
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
new file mode 100644
index 0000000..c60389a
--- /dev/null
+++ b/tests/dummy/app/templates/index.hbs
@@ -0,0 +1,422 @@
+<section class="container">
+  <h1>
+    ember-cli-bootstrap3-carousel
+    <img src="http://badge.fury.io/gh/cybertoothca%2Fember-cli-bootstrap3-carousel.svg"
+         alt="ember-cli-bootstrap3-carousel version">
+    <img src="http://badge.fury.io/js/ember-cli-bootstrap3-carousel.svg" alt="ember-cli-bootstrap3-carousel npm"/>
+  </h1>
+
+  <h2>Examples</h2>
+</section>
+
+<section class="container">
+  <h3>Basic Carousel With Lazy Loaded Images</h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+1" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+2" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+3" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+4" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+5" alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+    <div class="clearfix visible-lg visible-md visible-sm"></div>
+    <div class="col-xs-12">
+      <br/>
+      <div class="alert alert-info">
+        <p>The <em>slide</em> (or item) in the carousel that you want to appear first MUST:</p>
+        <ol>
+          <li>Set the active class; e.g. <code>classNames="active"</code></li>
+          <li>Do not lazy-load the image.</li>
+        </ol>
+        <p>
+          In the example above, the first <code>\{{twbs-carousel/slide}}</code> has its class set to
+          <code>active</code> and the <code>\{{twbs-carousel/slide/img}}</code> is not lazy-loaded.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h3>Another Basic Carousel Starting On The Third Slide</h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel as |carousel|}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+1" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+2" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+3" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+4" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+5" alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel as |carousel|}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+3" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h3>Sliding Carousel With Lazy Loaded Images</h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+1" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+2"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+3"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+4"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+5"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Animation+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+    <div class="clearfix visible-lg visible-md visible-sm"></div>
+    <div class="col-xs-12">
+      <br/>
+      <div class="alert alert-info">
+        <p>
+          To configure a a carousel that uses a slide animation to transition between slides, simply supply
+          the <code>classNames="slide"</code> class to the <code>\{{twbs-carousel}}</code> component.
+        </p>
+      </div>
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h2>Other Carousel Options</h2>
+
+  <div class="alert alert-info">
+    <p>Refer to the Bootstrap3 latest Carousel documentation to better understand these options.</p>
+    <p><a href="http://getbootstrap.com/javascript/#carousel-options">Bootstrap3 Carousel Options</a></p>
+  </div>
+</section>
+
+<section class="container">
+  <h3><code>interval=5000</code> (DEFAULT)</h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" interval=5000 as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+1" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+2"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+3"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+4"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+5"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" interval=5000 as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h3><code>interval=false</code></h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" interval=false as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+6" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+7"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+8"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+9"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+10"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" interval=false as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+6" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+7" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Interval+10" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h3><code>keyboard?=false</code></h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" keyboard?=false as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+1" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+2"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+3"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+4"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+5"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" keyboard?=false as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Keyboard+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h3><code>pause="hover"</code></h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" interval=500 pause="hover" as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+1"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+2"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+3"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+4"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+5"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" interval=500 pause="hover" as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+Pause+Hover+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
+
+<section class="container">
+  <h3><code>wrap?=false</code></h3>
+
+  <div class="row">
+    <div class="col-sm-6">
+      {{#twbs-carousel classNames="slide" wrap?=false as |carousel|}}
+        {{#carousel.slide classNames="active" as |slide|}}
+          {{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+1" alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+2"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+3"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+4"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+        {{#carousel.slide as |slide|}}
+          {{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+5"
+                      alt="A slide image."}}
+        {{/carousel.slide}}
+      {{/twbs-carousel}}
+    </div>
+    <div class="col-sm-6">
+      {{!-- @formatter:off --}}
+<pre>\{{#twbs-carousel classNames="slide" wrap?=false as |carousel|}}
+  \{{#carousel.slide classNames="active" as |slide|}}
+    \{{slide.img src="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+1" alt="A slide image."}}
+  \{{/carousel.slide}}
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+2" alt="A slide image."}}
+  \{{/carousel.slide}}
+  ...
+  \{{#carousel.slide as |slide|}}
+    \{{slide.img lazy="https://dummyimage.com/1600x900/f7d3a0/333.jpg&text=Slide+No+Wrap+5" alt="A slide image."}}
+  \{{/carousel.slide}}
+\{{/twbs-carousel}}
+</pre>
+{{!-- @formatter:on --}}
+    </div>
+  </div>
+  <hr/>
+</section>
diff --git a/tests/integration/components/twbs-carousel-test.js b/tests/integration/components/twbs-carousel-test.js
new file mode 100644
index 0000000..79b1bf0
--- /dev/null
+++ b/tests/integration/components/twbs-carousel-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('twbs-carousel', 'Integration | Component | twbs carousel', {
+  integration: true
+});
+
+test('it renders', function (assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{twbs-carousel}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#twbs-carousel}}
+      template block text
+    {{/twbs-carousel}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/tests/integration/components/twbs-carousel/slide-test.js b/tests/integration/components/twbs-carousel/slide-test.js
new file mode 100644
index 0000000..98b3767
--- /dev/null
+++ b/tests/integration/components/twbs-carousel/slide-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('twbs-carousel/slide', 'Integration | Component | twbs carousel/slide', {
+  integration: true
+});
+
+test('it renders', function (assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{twbs-carousel/slide}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#twbs-carousel/slide}}
+      template block text
+    {{/twbs-carousel/slide}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/tests/integration/components/twbs-carousel/slide/img-test.js b/tests/integration/components/twbs-carousel/slide/img-test.js
new file mode 100644
index 0000000..7d6abdb
--- /dev/null
+++ b/tests/integration/components/twbs-carousel/slide/img-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('twbs-carousel/slide/img', 'Integration | Component | twbs carousel/slide/img', {
+  integration: true
+});
+
+test('it renders', function (assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{twbs-carousel/slide/img}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#twbs-carousel/slide/img}}
+      template block text
+    {{/twbs-carousel/slide/img}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/tests/unit/mixins/carousel-test.js b/tests/unit/mixins/carousel-test.js
new file mode 100644
index 0000000..31c402a
--- /dev/null
+++ b/tests/unit/mixins/carousel-test.js
@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import CarouselMixin from 'ember-cli-bootstrap3-carousel/mixins/carousel';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | carousel');
+
+// Replace this with your real tests.
+test('it works', function (assert) {
+  let CarouselObject = Ember.Object.extend(CarouselMixin);
+  let subject = CarouselObject.create();
+  assert.ok(subject);
+});