Service are singleton

addon/components/carousel-arrow.js

@@ -27,6 +27,6 @@ export default Ember.Component.extend({
 
   click() {
     var method = carouselSlideActionMap[this.get('direction')];
-    this.get('carousel')[method]();
+    this.nearestWithProperty('isCarouselParentContainer')[method]();
   }
 });

addon/components/carousel-body.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 import layout from '../templates/components/carousel-body';
 
+
 export default Ember.Component.extend({
   layout: layout,
   classNames: ['carousel-body']

addon/components/carousel-container.js

@@ -1,19 +1,80 @@
 import Ember from 'ember';
 import layout from '../templates/components/carousel-container';
 
-const { on } = Ember;
+const { computed, on, run } = Ember;
 
 export default Ember.Component.extend({
   layout: layout,
-  carousel: Ember.inject.service(),
   classNames: ['carousel-container'],
 
-  // Initialize the `service:carousel` with the carousel items
+  isCarouselParentContainer: true,
+
+  carouselItems: null,
+  totalCarouselItems: computed.reads('carouselItems.length'),
+
   initializeCarouselItems: on('init', function() {
-    this.set('carousel.carouselItems', Ember.A());
+    this.set('carouselItems', Ember.A());
+  }),
+
+  activeCarouselItem: computed('carouselItems.length', 'carouselItems.@each.isActive', {
+    get() {
+      return this.get('carouselItems').findBy('isActive');
+    }
   }),
 
-  resetCarousel: on('willDestroyElement', function() {
-    this.initializeCarouselItems();
-  })
+  registerCarouselItem(carouselItem) {
+    this.get('carouselItems').pushObject(carouselItem);
+  },
+
+  slide(newActiveIndex, direction) {
+    var carouselItems = this.get('carouselItems');
+    var activeCarouselItem = this.get('activeCarouselItem');
+    var newActiveCarouselItem = carouselItems[newActiveIndex];
+
+    run(function() {
+      activeCarouselItem.set('from', direction);
+      newActiveCarouselItem.set('from', direction);
+    });
+
+    run.later(function() {
+      activeCarouselItem.set('slidingOut', true);
+      newActiveCarouselItem.set('slidingIn', true);
+    }, 50);
+
+    run.later(function() {
+      activeCarouselItem.setProperties({
+        slidingOut: false,
+        from: null,
+        isActive: false
+      });
+
+      newActiveCarouselItem.setProperties({
+        slidingIn: false,
+        from: null,
+        isActive: true
+      });
+    }, 550);
+  },
+
+  slideRight() {
+    var activeIndex = this.get('activeCarouselItem.index');
+    let newActiveIndex = activeIndex - 1;
+
+    if(activeIndex === 0) {
+      newActiveIndex = this.get('totalCarouselItems') - 1;
+    }
+
+    this.slide(newActiveIndex, 'right');
+  },
+
+  slideLeft() {
+    var activeIndex = this.get('activeCarouselItem.index');
+    let newActiveIndex = activeIndex + 1;
+
+    if(activeIndex === (this.get('totalCarouselItems') - 1)) {
+      newActiveIndex = 0;
+    }
+
+    this.slide(newActiveIndex, 'left');
+  }
 });

addon/components/carousel-item.js

@@ -10,9 +10,11 @@ export default Ember.Component.extend({
 
   index: 0,
 
-  isActive: computed('carousel.carouselItems.[]', {
+  _carouselContainer: null,
+
+  isActive: computed('_carouselContainer.carouselItems.[]', {
     get() {
-      return this === this.get('carousel.carouselItems.firstObject');
+      return this === this.get('_carouselContainer.carouselItems.firstObject');
     },
 
     set(key, value) {
@@ -21,8 +23,9 @@ export default Ember.Component.extend({
   }),
 
   registerOnCarosuelBody: on('init', function() {
-    const carouselSerivce = this.get('carousel');
-    carouselSerivce.registerCarouselItem(this);
-    this.set('index', carouselSerivce.get('totalCarouselItems') - 1);
+    const carouselContainer = this.nearestWithProperty('isCarouselParentContainer');
+    this.set('_carouselContainer', carouselContainer);
+    carouselContainer.registerCarouselItem(this);
+    this.set('index', carouselContainer.get('totalCarouselItems') - 1);
   })
 });

addon/styles/carousel.css

@@ -4,6 +4,11 @@
   display: block;
 }
 
+.carousel-body {
+  position: relative;
+  overflow: hidden;
+}
+
 .carousel-body::after, .carousel-body::before {
   content: '';
   display: table;
@@ -13,3 +18,7 @@
 .carousel-item {
   display: none;
 }
+
+.carousel-item.active {
+  display: block;
+}

tests/dummy/app/styles/app.css

@@ -44,19 +44,13 @@ a {
 
 
 /* For Carousel Component */
-.carousel-body {
-  position: relative;
-  overflow: hidden;
-}
-
 .carousel-item {
-  display: none;
   position: relative;
   transition: all 0.5s ease-in-out;
 }
 
 
-.carousel-item.active, .carousel-item.left, .carousel-item.right {
+.carousel-item.left, .carousel-item.right {
   display: block;
 }