diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index 3c9bd1a526..3f81e7502f 100644
--- a/ionic/components/slides/slides.ts
+++ b/ionic/components/slides/slides.ts
@@ -1,4 +1,4 @@
-import {Directive, Component, ElementRef, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
+import {Directive, Component, ElementRef, Renderer, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgClass} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -193,9 +193,6 @@ import {Scroll} from '../scroll/scroll';
       '<div [class.hide]="!showPager" class="swiper-pagination"></div>' +
     '</div>',
   directives: [NgClass],
-  host: {
-    '[class]': 'slideId'
-  },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
@@ -340,7 +337,7 @@ export class Slides extends Ion {
   @Output() move: EventEmitter<any> = new EventEmitter();
 
 
-  constructor(elementRef: ElementRef) {
+  constructor(elementRef: ElementRef, renderer: Renderer) {
     super(elementRef);
     this.rapidUpdate = debounce(() => {
       this.update();
@@ -348,6 +345,8 @@ export class Slides extends Ion {
 
     this.id = ++slidesId;
     this.slideId = 'slides-' + this.id;
+
+    renderer.setElementClass(elementRef.nativeElement, this.slideId, true);
   }
 
   /**
diff --git a/ionic/components/slides/test/controller/main.html b/ionic/components/slides/test/controller/main.html
index 1ec9978f97..cbccfbb7b2 100644
--- a/ionic/components/slides/test/controller/main.html
+++ b/ionic/components/slides/test/controller/main.html
@@ -1,4 +1,4 @@
-<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()">
+<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()" class="my-slides">
   <ion-slide padding>
     <h1>Slide 1</h1>
     <button block (click)="goToPrevSlide()">Navigate Back</button>