diff --git a/core/src/components/slides/slides.scss b/core/src/components/slides/slides.scss
index 082d430586..e190ae8b8b 100644
--- a/core/src/components/slides/slides.scss
+++ b/core/src/components/slides/slides.scss
@@ -8,6 +8,10 @@
   display: block;
 }
 
+.swiper-container {
+  height: 100%;
+}
+
 
 // Pagination Bullets
 // --------------------------------------------------
diff --git a/core/src/components/slides/test/app-intro/index.html b/core/src/components/slides/test/app-intro/index.html
index 4fd948ac14..1e19acca4f 100644
--- a/core/src/components/slides/test/app-intro/index.html
+++ b/core/src/components/slides/test/app-intro/index.html
@@ -10,14 +10,11 @@
   <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 
   <style>
-    .scroll-inner,
-    .slides,
-    .swiper-container {
+    ion-slides {
       height: 100%;
     }
 
     .swiper-slide {
-      display: flex;
       display: flex;
       flex-direction: column;
     }
@@ -25,13 +22,11 @@
     .swiper-slide img {
       max-width: 300px;
     }
-
   </style>
 </head>
 
 <body>
   <ion-app>
-
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="secondary">
@@ -44,7 +39,6 @@
     </ion-header>
     <ion-content>
       <ion-slides class="slides">
-
         <ion-slide>
           <img src="https://images.unsplash.com/photo-1490718687940-0ecadf414600?auto=format&fit=crop&w=1352&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
             class="slide-image" />
@@ -92,7 +86,6 @@
         </ion-slide>
       </ion-slides>
     </ion-content>
-
   </ion-app>
   <script>
     const slides = document.querySelector('.slides')
