chore(): prep move from ionic to core for use of vanilla

2025-08-23 05:58:26 +08:00 · 2017-06-22 14:59:33 -05:00
parent 9693be4244
commit c7010e28b7
212 changed files with 50 additions and 39 deletions
--- a/packages/core/src/components/slides/slide.scss
+++ b/packages/core/src/components/slides/slide.scss
@ -0,0 +1,47 @@
+@import "../../themes/ionic.globals";
+
+
+// Slide
+// --------------------------------------------------
+
+ion-slide {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.slide-zoom {
+  @include text-align(center);
+
+  display: block;
+
+  width: 100%;
+}
+
+.swiper-slide {
+  @include text-align(center);
+
+  position: relative;
+
+  // Center slide text vertically
+  display: flex;
+
+  flex-shrink: 0;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  font-size: 18px;
+
+  box-sizing: border-box;
+}
+
+.swiper-slide img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
--- a/packages/core/src/components/slides/slide.tsx
+++ b/packages/core/src/components/slides/slide.tsx
@ -0,0 +1,32 @@
+import { Component, h, VNodeData } from '@stencil/core';
+
+ /**
+  * @name Slide
+  * @description
+  * The Slide component is a child component of [Slides](../Slides). The template
+  * should be written as `ion-slide`. Any slide content should be written
+  * in this component and it should be used in conjunction with [Slides](../Slides).
+  *
+  * See the [Slides API Docs](../Slides) for more usage information.
+  *
+  * @demo /docs/demos/src/slides/
+  * @see {@link /docs/api/components/slides/Slides/ Slides API Docs}
+  */
+@Component({
+  tag: 'ion-slide',
+  styleUrls: 'slide.scss'
+})
+export class Slide {
+  hostData(): VNodeData {
+    return {
+      class: {
+        'slide-zoom': true,
+        'swiper-slide': true
+      }
+    };
+  }
+
+  render() {
+    return <slot></slot>;
+  }
+}
--- a/packages/core/src/components/slides/slides-import.scss
+++ b/packages/core/src/components/slides/slides-import.scss
@ -0,0 +1,575 @@
+/**
+ * Swiper 3.4.2
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ *
+ * http://www.idangero.us/swiper/
+ *
+ * Copyright 2017, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ *
+ * Licensed under MIT
+ *
+ * Released on: March 10, 2017
+ */
+.swiper-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-container-no-flexbox .swiper-slide {
+  float: left;
+}
+.swiper-container-vertical > .swiper-wrapper {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -o-transition-property: -o-transform;
+  -ms-transition-property: -ms-transform;
+  transition-property: transform;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+  -webkit-transform: translate3d(0px, 0, 0);
+  -moz-transform: translate3d(0px, 0, 0);
+  -o-transform: translate(0px, 0px);
+  -ms-transform: translate3d(0px, 0, 0);
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-container-multirow > .swiper-wrapper {
+  -webkit-box-lines: multiple;
+  -moz-box-lines: multiple;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.swiper-container-free-mode > .swiper-wrapper {
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-slide {
+  -webkit-flex-shrink: 0;
+  -ms-flex: 0 0 auto;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+/* Auto Height */
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-container-autoheight .swiper-wrapper {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+  -webkit-transition-property: -webkit-transform, height;
+  -moz-transition-property: -moz-transform;
+  -o-transition-property: -o-transform;
+  -ms-transition-property: -ms-transform;
+  transition-property: transform, height;
+}
+/* a11y */
+.swiper-container .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+/* IE10 Windows Phone 8 Fixes */
+.swiper-wp8-horizontal {
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+.swiper-wp8-vertical {
+  -ms-touch-action: pan-x;
+  touch-action: pan-x;
+}
+/* Arrows */
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: 27px;
+  height: 44px;
+  margin-top: -22px;
+  z-index: 10;
+  cursor: pointer;
+  -moz-background-size: 27px 44px;
+  -webkit-background-size: 27px 44px;
+  background-size: 27px 44px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  left: 10px;
+  right: auto;
+}
+.swiper-button-prev.swiper-button-black,
+.swiper-container-rtl .swiper-button-next.swiper-button-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-container-rtl .swiper-button-next.swiper-button-white {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  right: 10px;
+  left: auto;
+}
+.swiper-button-next.swiper-button-black,
+.swiper-container-rtl .swiper-button-prev.swiper-button-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-next.swiper-button-white,
+.swiper-container-rtl .swiper-button-prev.swiper-button-white {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
+}
+/* Pagination Styles */
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  -webkit-transition: 300ms;
+  -moz-transition: 300ms;
+  -o-transition: 300ms;
+  transition: 300ms;
+  -webkit-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  border-radius: 100%;
+  background: #000;
+  opacity: 0.2;
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-white .swiper-pagination-bullet {
+  background: #fff;
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  background: #007aff;
+}
+.swiper-pagination-white .swiper-pagination-bullet-active {
+  background: #fff;
+}
+.swiper-pagination-black .swiper-pagination-bullet-active {
+  background: #000;
+}
+.swiper-container-vertical > .swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  -webkit-transform: translate3d(0px, -50%, 0);
+  -moz-transform: translate3d(0px, -50%, 0);
+  -o-transform: translate(0px, -50%);
+  -ms-transform: translate3d(0px, -50%, 0);
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 5px 0;
+  display: block;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 5px;
+}
+/* Progress */
+.swiper-pagination-progress {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progress .swiper-pagination-progressbar {
+  background: #007aff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+  transform: scale(0);
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -o-transform-origin: left top;
+  transform-origin: left top;
+}
+.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
+  -webkit-transform-origin: right top;
+  -moz-transform-origin: right top;
+  -ms-transform-origin: right top;
+  -o-transform-origin: right top;
+  transform-origin: right top;
+}
+.swiper-container-horizontal > .swiper-pagination-progress {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-container-vertical > .swiper-pagination-progress {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-progress.swiper-pagination-white {
+  background: rgba(255, 255, 255, 0.5);
+}
+.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
+  background: #fff;
+}
+.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
+  background: #000;
+}
+/* 3D Container */
+.swiper-container-3d {
+  -webkit-perspective: 1200px;
+  -moz-perspective: 1200px;
+  -o-perspective: 1200px;
+  perspective: 1200px;
+}
+.swiper-container-3d .swiper-wrapper,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-cube-shadow {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-container-3d .swiper-slide-shadow-left {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  /* Safari 4+, Chrome */
+  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Chrome 10+, Safari 5.1+, iOS 5+ */
+  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 3.6-15 */
+  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Opera 11.10-12.00 */
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 16+, IE10, Opera 12.50+ */
+}
+.swiper-container-3d .swiper-slide-shadow-right {
+  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  /* Safari 4+, Chrome */
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Chrome 10+, Safari 5.1+, iOS 5+ */
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 3.6-15 */
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Opera 11.10-12.00 */
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 16+, IE10, Opera 12.50+ */
+}
+.swiper-container-3d .swiper-slide-shadow-top {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  /* Safari 4+, Chrome */
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Chrome 10+, Safari 5.1+, iOS 5+ */
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 3.6-15 */
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Opera 11.10-12.00 */
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 16+, IE10, Opera 12.50+ */
+}
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  /* Safari 4+, Chrome */
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Chrome 10+, Safari 5.1+, iOS 5+ */
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 3.6-15 */
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Opera 11.10-12.00 */
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  /* Firefox 16+, IE10, Opera 12.50+ */
+}
+/* Coverflow */
+.swiper-container-coverflow .swiper-wrapper,
+.swiper-container-flip .swiper-wrapper {
+  /* Windows 8 IE 10 fix */
+  -ms-perspective: 1200px;
+}
+/* Cube + Flip */
+.swiper-container-cube,
+.swiper-container-flip {
+  overflow: visible;
+}
+.swiper-container-cube .swiper-slide,
+.swiper-container-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-container-cube .swiper-slide .swiper-slide,
+.swiper-container-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube .swiper-slide-shadow-top,
+.swiper-container-flip .swiper-slide-shadow-top,
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right,
+.swiper-container-flip .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+/* Cube */
+.swiper-container-cube .swiper-slide {
+  visibility: hidden;
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+  -webkit-transform-origin: 100% 0;
+  -moz-transform-origin: 100% 0;
+  -ms-transform-origin: 100% 0;
+  transform-origin: 100% 0;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-prev,
+.swiper-container-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-container-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.6;
+  -webkit-filter: blur(50px);
+  filter: blur(50px);
+  z-index: 0;
+}
+/* Fade */
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.swiper-container-fade .swiper-slide {
+  pointer-events: none;
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  transition-property: opacity;
+}
+.swiper-container-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-container-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-container-vertical > .swiper-scrollbar {
+  position: absolute;
+  right: 3px;
+  top: 1%;
+  z-index: 50;
+  width: 5px;
+  height: 98%;
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+/* Preloader */
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  -webkit-transform-origin: 50%;
+  -moz-transform-origin: 50%;
+  transform-origin: 50%;
+  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
+  -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
+  animation: swiper-preloader-spin 1s steps(12, end) infinite;
+}
+.swiper-lazy-preloader:after {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  background-position: 50%;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.swiper-lazy-preloader-white:after {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+@-webkit-keyframes swiper-preloader-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/packages/core/src/components/slides/slides.scss
+++ b/packages/core/src/components/slides/slides.scss
@ -0,0 +1,11 @@
+@import "../../themes/ionic.globals";
+@import "./slides-import";
+
+
+// Slides
+// --------------------------------------------------
+
+
+ion-slides {
+  display: block;
+}
--- a/packages/core/src/components/slides/slides.tsx
+++ b/packages/core/src/components/slides/slides.tsx
@ -0,0 +1,524 @@
+import { Component, h, Prop, Ionic } from '@stencil/core';
+import { Swiper } from '../../vendor/swiper';
+
+/**
+ * @name Slides
+ * @description
+ * The Slides component is a multi-section container. Each section can be swiped
+ * or dragged between. It contains any number of [Slide](../Slide) components.
+ *
+ *
+ * Adopted from Swiper.js:
+ * The most modern mobile touch slider and framework with
+ * hardware accelerated transitions.
+ *
+ * http://www.idangero.us/swiper/
+ *
+ * Copyright 2016, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ *
+ * Licensed under MIT
+ */
+
+
+@Component({
+  tag: 'ion-slides',
+  styleUrls: 'slides.scss'
+})
+export class Slides {
+  swiper: any;
+  $el: HTMLElement;
+
+  /**
+   * @input {string} The animation effect of the slides.
+   * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
+   * Default: `slide`.
+   */
+  @Prop() effect: string = 'slide';
+
+  /**
+   * @input {number} Delay between transitions (in milliseconds). If this
+   * parameter is not passed, autoplay is disabled. Default does
+   * not have a value and does not autoplay.
+   * Default: `null`.
+   */
+  @Prop() autoplay: number;
+
+  /**
+   * @input {Slides} Pass another Slides instance or array of Slides instances
+   * that should be controlled by this Slides instance.
+   * Default: `null`.
+   */
+  @Prop() control: Slides | Slides[] = null;
+
+  /**
+   * @input {string}  Swipe direction: 'horizontal' or 'vertical'.
+   * Default: `horizontal`.
+   */
+  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';
+
+  /**
+   * @input {number}  Index number of initial slide. Default: `0`.
+   */
+  @Prop() initialSlide: number = 0;
+
+  /**
+   * @input {boolean} If true, continuously loop from the last slide to the
+   * first slide.
+   */
+  @Prop() loop: boolean = false;
+
+  /**
+   * @input {boolean}  If true, show the pager.
+   */
+  @Prop() pager: boolean;
+
+  /**
+   * @input {string}  Type of pagination. Possible values are:
+   * `bullets`, `fraction`, `progress`. Default: `bullets`.
+   * (Note that the pager will not show unless `pager` input
+   * is set to true).
+   */
+  @Prop() paginationType: string = 'bullets';
+
+
+  /**
+   * @input {boolean} If true, allows you to use "parallaxed" elements inside of
+   * slider.
+   */
+  @Prop() parallax: boolean = false;
+
+  /**
+   * @input {number} Slides per view. Slides visible at the same time. Default: `1`.
+   */
+  @Prop() slidesPerView: number | 'auto' = 1;
+
+  /**
+   * @input {number} Distance between slides in px. Default: `0`.
+   */
+  @Prop() spaceBetween: number = 0;
+
+  /**
+   * @input {number} Duration of transition between slides
+   * (in milliseconds). Default: `300`.
+   */
+  @Prop() speed: number = 300;
+
+
+  /**
+   * @input {boolean} If true, enables zooming functionality.
+   */
+  @Prop() zoom: boolean;
+
+  /**
+   * @input {boolean} If true, enables keyboard control
+   */
+  @Prop() keyboardControl: boolean;
+
+
+  render() {
+    return (
+      <div class='swiper-container' data-dir='rtl'>
+        <div class='swiper-wrapper'>
+          <slot></slot>
+        </div>
+        <div class={{
+          'swiper-pagination': true,
+          'hide': !this.pager
+        }}></div>
+      </div>
+    );
+  }
+
+  /**
+   * @hidden
+   * Height of container.
+   */
+  height: number;
+
+  /**
+   * @hidden
+   * Width of container.
+   */
+  width: number;
+
+  /**
+   * @hidden
+   * Enabled this option and swiper will be operated as usual except it will
+   * not move, real translate values on wrapper will not be set. Useful when
+   * you may need to create custom slide transition.
+   */
+  virtualTranslate = false;
+
+  /**
+   * @hidden
+   * Set to true to round values of slides width and height to prevent blurry
+   * texts on usual resolution screens (if you have such)
+   */
+  roundLengths = false;
+
+  // Slides grid
+
+  /**
+   * @hidden
+   */
+  originalEvent: any;
+
+  emitEvent(eventName: string) {
+    return (data: any) => {
+      Ionic.emit(this, eventName, data);
+    };
+  }
+
+
+  /**
+   * Private properties only useful to this class.
+   * ------------------------------------
+   */
+  private _init: boolean;
+  private _tmr: number;
+
+  /**
+   * Properties that are exposed publically but no docs.
+   * ------------------------------------
+   */
+  /** @hidden */
+  container: HTMLElement;
+  /** @hidden */
+  id: number;
+  /** @hidden */
+  renderedHeight: number;
+  /** @hidden */
+  renderedWidth: number;
+  /** @hidden */
+  slideId: string;
+  /** @hidden */
+  swipeDirection: string;
+  /** @hidden */
+  velocity: number;
+
+
+  /**
+   * Properties which are for internal use only
+   * and not exposed to the public
+   * ------------------------------------
+   */
+
+  /** @hidden */
+  nextButton: HTMLElement;
+  /** @hidden */
+  prevButton: HTMLElement;
+
+
+
+  constructor(
+  ) {
+    this.id = ++slidesId;
+    this.slideId = 'slides-' + this.id;
+  }
+
+  private _initSlides() {
+    if (!this._init) {
+      console.debug(`ion-slides, init`);
+
+      this.container = this.$el.children[0] as HTMLElement;
+
+      var swiperOptions = {
+        height: this.height,
+        width: this.width,
+        virtualTranslate: this.virtualTranslate,
+        roundLengths: this.roundLengths,
+        originalEvent: this.originalEvent,
+        autoplay: this.autoplay,
+        direction: this.direction,
+        initialSlide: this.initialSlide,
+        loop: this.loop,
+        pager: this.pager,
+        paginationType: this.paginationType,
+        parallax: this.parallax,
+        slidesPerView: this.slidesPerView,
+        spaceBetween: this.spaceBetween,
+        speed: this.speed,
+        zoom: this.zoom,
+        slidesPerColumn: 1,
+        slidesPerColumnFill: 'column',
+        slidesPerGroup: 1,
+        centeredSlides: false,
+        slidesOffsetBefore: 0,
+        slidesOffsetAfter: 0,
+        touchEventsTarget: 'container',
+        autoplayDisableOnInteraction: true,
+        autoplayStopOnLast: false,
+        freeMode: false,
+        freeModeMomentum: true,
+        freeModeMomentumRatio: 1,
+        freeModeMomentumBounce: true,
+        freeModeMomentumBounceRatio: 1,
+        freeModeMomentumVelocityRatio: 1,
+        freeModeSticky: false,
+        freeModeMinimumVelocity: 0.02,
+        autoHeight: false,
+        setWrapperSize: false,
+        zoomMax: 3,
+        zoomMin: 1,
+        zoomToggle: true,
+        touchRatio: 1,
+        touchAngle: 45,
+        simulateTouch: true,
+        shortSwipes: true,
+        longSwipes: true,
+        longSwipesRatio: 0.5,
+        longSwipesMs: 300,
+        followFinger: true,
+        onlyExternal: false,
+        threshold: 0,
+        touchMoveStopPropagation: true,
+        touchReleaseOnEdges: false,
+        iOSEdgeSwipeDetection: false,
+        iOSEdgeSwipeThreshold: 20,
+        paginationClickable: false,
+        paginationHide: false,
+        resistance: true,
+        resistanceRatio: 0.85,
+        watchSlidesProgress: false,
+        watchSlidesVisibility: false,
+        preventClicks: true,
+        preventClicksPropagation: true,
+        slideToClickedSlide: false,
+        loopAdditionalSlides: 0,
+        noSwiping: true,
+        runCallbacksOnInit: true,
+        controlBy: 'slide',
+        controlInverse: false,
+        keyboardControl: true,
+        coverflow: {
+          rotate: 50,
+          stretch: 0,
+          depth: 100,
+          modifier: 1,
+          slideShadows: true
+        },
+        flip: {
+          slideShadows: true,
+          limitRotation: true
+        },
+        cube: {
+          slideShadows: true,
+          shadow: true,
+          shadowOffset: 20,
+          shadowScale: 0.94
+        },
+        fade: {
+          crossFade: false
+        },
+        prevSlideMessage: 'Previous slide',
+        nextSlideMessage: 'Next slide',
+        firstSlideMessage: 'This is the first slide',
+        lastSlideMessage: 'This is the last slide',
+        onSlideChangeStart: this.emitEvent('ionSlideWillChange'),
+        onSlideChangeEnd: this.emitEvent('ionSlideDidChange'),
+        onAutoplay: this.emitEvent('ionSlideAutoplay'),
+        onAutoplayStart: this.emitEvent('ionSlideAutoplayStart'),
+        onAutoplayStop: this.emitEvent('ionSlideAutoplayStop'),
+        onSlideNextStart: this.emitEvent('ionSlideNextStarto'),
+        onSlidePrevStart: this.emitEvent('ionSlidePrevStart'),
+        onSlideNextEnd: this.emitEvent('ionSlideNextEnd'),
+        onSlidePrevEnd: this.emitEvent('ionSlidePrevEnd'),
+        onTransitionStart: this.emitEvent('ionSlideTransitionStart'),
+        onTransitionEnd: this.emitEvent('ionSlideTransitionEnd'),
+        onTap: this.emitEvent('ionSlideTap'),
+        onDoubleTap: this.emitEvent('ionSlideDoubleTap'),
+        onProgress: this.emitEvent('ionSlideProgress'),
+        onSliderMove: this.emitEvent('ionSlideDrag'),
+        onReachBeginning: this.emitEvent('ionSlideReachStart'),
+        onReachEnd: this.emitEvent('ionSlideReachEnd'),
+        onTouchStart: this.emitEvent('ionSlideTouchStart'),
+        onTouchEnd: this.emitEvent('ionSlideTouchEnd')
+      };
+
+      // init swiper core
+      this.swiper = new Swiper(this.container, swiperOptions);
+
+      if (this.keyboardControl) {
+        // init keyboard event listeners
+        this.enableKeyboardControl(true);
+      }
+
+      this._init = true;
+    }
+  }
+
+  /**
+   * @hidden
+   */
+  ionViewDidLoad() {
+    /**
+     * TODO: This should change because currently ionViewDidLoad fires independent of whether the
+     * child components are ready.
+     */
+    setTimeout(() => {
+      this._initSlides();
+    }, 10);
+  }
+
+  /**
+   * Update the underlying slider implementation. Call this if you've added or removed
+   * child slides.
+   */
+  update(debounce = 300) {
+    if (this._init) {
+      window.clearTimeout(this._tmr);
+      this._tmr = window.setTimeout(() => {
+        this.swiper.update();
+
+        // Don't allow pager to show with > 10 slides
+        if (this.length() > 10) {
+          this.paginationType = undefined;
+        }
+      }, debounce);
+    }
+  }
+
+  /**
+   * Transition to the specified slide.
+   *
+   * @param {number} index  The index number of the slide.
+   * @param {number} [speed]  Transition duration (in ms).
+   * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
+   */
+  slideTo(index: number, speed?: number, runCallbacks?: boolean) {
+    this.swiper.slideTo(index, speed, runCallbacks);
+  }
+
+  /**
+   * Transition to the next slide.
+   *
+   * @param {number} [speed]  Transition duration (in ms).
+   * @param {boolean} [runCallbacks]  Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
+   */
+  slideNext(speed?: number, runCallbacks?: boolean) {
+    this.swiper.slideNext(runCallbacks, speed);
+  }
+
+  /**
+   * Transition to the previous slide.
+   *
+   * @param {number} [speed]  Transition duration (in ms).
+   * @param {boolean} [runCallbacks]  Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
+   */
+  slidePrev(speed?: number, runCallbacks?: boolean) {
+    this.swiper.slidePrev(runCallbacks, speed);
+  }
+
+  /**
+   * Get the index of the active slide.
+   *
+   * @returns {number} The index number of the current slide.
+   */
+  getActiveIndex(): number {
+    return this.swiper.activeIndex;
+  }
+
+  /**
+   * Get the index of the previous slide.
+   *
+   * @returns {number} The index number of the previous slide.
+   */
+  getPreviousIndex(): number {
+    return this.swiper.previousIndex;
+  }
+
+  /**
+   * Get the total number of slides.
+   *
+   * @returns {number} The total number of slides.
+   */
+  length(): number {
+    return this.swiper.slides.length;
+  }
+
+  /**
+   * Get whether or not the current slide is the last slide.
+   *
+   * @returns {boolean} If the slide is the last slide or not.
+   */
+  isEnd(): boolean {
+    return this.isEnd();
+  }
+
+  /**
+   * Get whether or not the current slide is the first slide.
+   *
+   * @returns {boolean} If the slide is the first slide or not.
+   */
+  isBeginning(): boolean {
+    return this.isBeginning();
+  }
+
+  /**
+   * Start auto play.
+   */
+  startAutoplay() {
+    this.swiper.startAutoplay();
+  }
+
+  /**
+   * Stop auto play.
+   */
+  stopAutoplay() {
+    this.swiper.stopAutoplay();
+  }
+
+  /**
+   * Lock or unlock the ability to slide to the next slides.
+   */
+  lockSwipeToNext(shouldLockSwipeToNext: boolean) {
+    if (shouldLockSwipeToNext) {
+      return this.swiper.lockSwipeToNext();
+    }
+    this.swiper.unlockSwipeToNext();
+  }
+
+  /**
+   * Lock or unlock the ability to slide to the previous slides.
+   */
+  lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
+    if (shouldLockSwipeToPrev) {
+      return this.swiper.lockSwipeToPrev();
+    }
+    this.swiper.unlockSwipeToPrev();
+  }
+
+  /**
+   * Lock or unlock the ability to slide to change slides.
+   */
+  lockSwipes(shouldLockSwipes: boolean) {
+    if (shouldLockSwipes) {
+      return this.swiper.lockSwipes();
+    }
+    this.swiper.unlockSwipes();
+  }
+
+  /**
+   * Enable or disable keyboard control.
+   */
+  enableKeyboardControl(shouldEnableKeyboard: boolean) {
+    if (shouldEnableKeyboard) {
+      return this.swiper.enableKeyboardControl();
+    }
+    this.swiper.disableKeyboardControl();
+  }
+
+  /**
+   * @hidden
+   */
+  ionViewDidUnload() {
+    this._init = false;
+
+    this.swiper.destroy(true, true);
+    this.enableKeyboardControl(false);
+  }
+}
+
+let slidesId = -1;