diff --git a/core/src/components/slides/slides-vendor.scss b/core/src/components/slides/slides-vendor.scss
index 0b9954558d..549f361a95 100644
--- a/core/src/components/slides/slides-vendor.scss
+++ b/core/src/components/slides/slides-vendor.scss
@@ -21,6 +21,9 @@
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
+.swiper-container-vertical {
+ height: 100%;
+}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
diff --git a/core/src/components/slides/test/vertical/e2e.ts b/core/src/components/slides/test/vertical/e2e.ts
new file mode 100644
index 0000000000..2a3ce9bebd
--- /dev/null
+++ b/core/src/components/slides/test/vertical/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('slides: vertical', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/slides/test/vertical?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/slides/test/vertical/index.html b/core/src/components/slides/test/vertical/index.html
new file mode 100644
index 0000000000..b6fc19eaa9
--- /dev/null
+++ b/core/src/components/slides/test/vertical/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ Slides - Vertical
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Slide 1
+
+
+ Slide 2
+
+
+ Slide 3
+
+
+
+
+
+
+
+
+
+
+
+