diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 5dd53a967f..a331f030d4 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -26,3 +26,30 @@ section.hidden {
 .components-demo h4 {
     text-align: center;
 }
+
+ion-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.demo-slide {
+  display: block;
+  height: 100%;
+  padding: 500px 0;
+  width: 100%;
+  font-weight: bold;
+  font-size: 2.5em;
+  color: #fff;
+}
+
+.demo-slide-1 {
+  background-color: #32db64;
+}
+
+.demo-slide-2 {
+  background-color: #387ef5;
+}
+
+.demo-slide-3 {
+  background-color: #f53d3d;
+}
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index f08a2d9909..fdcfa40771 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -244,8 +244,26 @@
     <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
    TODO
   </section>
-    <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
-   TODO
+  
+  <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
+   
+   <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
+      <ion-slide>
+        <div class="demo-slide demo-slide-1">
+          Slide 1
+        </div>
+      </ion-slide>
+      <ion-slide>
+        <div class="demo-slide demo-slide-2">
+          Slide 2
+        </div>
+      </ion-slide>
+      <ion-slide>
+        <div class="demo-slide demo-slide-3">
+          Slide 3
+        </div>
+      </ion-slide>
+   </ion-slides>
   </section>
 
     <section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">