stenciljs · jthoms1 · Apr 27, 2017 · Apr 19, 2017 · Apr 19, 2017 · Apr 20, 2017
diff --git a/demos/slider/index.html b/demos/slider/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Slides Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic-web/ionic.js"></script>
+</head>
+<body>
+
+<ion-slides style="background: black"
+            (ionSlideWillChange)="onSlideWillChange($event)"
+            (ionSlideDidChange)="onSlideDidChange($event)"
+            (ionSlideDrag)="onSlideDrag($event)"
+            pager="true"
+            effect="flip">
+
+  <ion-slide style="background: red; color: white;">
+    <h1>Slide 1</h1>
+  </ion-slide>
+
+  <ion-slide style="background: white; color: blue;">
+    <h1>Slide 2</h1>
+  </ion-slide>
+
+  <ion-slide style="background: blue; color: white;">
+    <h1>Slide 3</h1>
+  </ion-slide>
+
+</ion-slides>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@types/fs-extra": "^2.0.0",
     "@types/jest": "18.1.1",
     "@types/node": "7.0.5",
+    "@types/swiper": "^3.4.2",
     "babel-cli": "^6.24.0",
     "babel-core": "^6.24.0",
     "babel-plugin-transform-define": "^1.2.0",
@@ -42,6 +43,9 @@
     "parse5": "^3.0.2",
     "rimraf": "2.6.1",
     "rollup": "0.41.4",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "swiper": "^3.4.2",
     "tslint": "^5.1.0",
     "tslint-ionic-rules": "0.0.8",
     "typescript": "next"

diff --git a/scripts/build-web.ts b/scripts/build-web.ts
@@ -84,6 +84,7 @@ function compileComponents() {
       ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title'],
       ['ion-gesture', 'ion-scroll'],
       ['ion-toggle']
+      ['ion-slides']
     ],
     packages: {
       fs: fs,

diff --git a/src/compiler/bundle.ts b/src/compiler/bundle.ts
@@ -2,7 +2,8 @@ import { bundleComponentModeStyles } from './styles';
 import { Bundle, BundlerConfig, BuildContext, Component, ComponentMode, Manifest, Results } from './interfaces';
 import { formatComponentRegistryProps, formatComponentModeLoader, formatModeName, formatBundleFileName, formatBundleContent, formatRegistryContent } from './formatters';
 import { readFile, writeFile } from './util';
-
+import commonjs from 'rollup-plugin-commonjs';
+import nodeResolve from 'rollup-plugin-node-resolve';
 
 export function bundle(config: BundlerConfig, ctx: BuildContext = {}): Promise<Results> {
   if (!config.packages) {
@@ -77,12 +78,21 @@ function bundleComponentModule(config: BundlerConfig, component: Component) {
   }
 
   return config.packages.rollup.rollup({
-    entry: entry
-
+    entry: entry,
+    plugins: [
+      nodeResolve({
+        jsnext: true,
+        main: true
+      }),
+      commonjs({
+        include: 'node_modules/**',
+        sourceMap: false
+      })
+    ]
   }).then(bundle => {
     const results = bundle.generate({
       format: 'iife',
-      moduleName: 'ionicModule'
+      moduleName: 'ionicModule',
     });
 
     let code = results.code.trim();

diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
@@ -211,6 +211,7 @@ export interface Rollup {
       footer?: string;
       exports?: string;
       moduleName?: string;
+      plugins?: any;
     }): {
       code: string;
       map: any;

diff --git a/src/components/slides/slide.ios.scss b/src/components/slides/slide.ios.scss
@@ -0,0 +1,2 @@
+@import "../../themes/ionic.globals";
+@import "./slide"
diff --git a/src/components/slides/slide.md.scss b/src/components/slides/slide.md.scss
@@ -0,0 +1,2 @@
+@import "../../themes/ionic.globals";
+@import "./slide"
diff --git a/src/components/slides/slide.scss b/src/components/slides/slide.scss
@@ -0,0 +1,34 @@
+ion-slides,
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.slide-zoom {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+
+  box-sizing: border-box;
+
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/src/components/slides/slide.ts b/src/components/slides/slide.ts
@@ -0,0 +1,35 @@
+import { Component, h } from '../../index';
+
+ /**
+  * @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: {
+    ios: 'slide.ios.scss',
+    md: 'slide.md.scss',
+    wp: 'slide.wp.scss'
+  },
+  shadow: false
+})
+export class Slide {
+  $el: HTMLElement;
+
+  render() {
+    return h(this, {
+      class: {
+        'slide-zoom': true,
+        'swiper-slide': true
+      }
+    })
+  }
+}
diff --git a/src/components/slides/slide.wp.scss b/src/components/slides/slide.wp.scss
@@ -0,0 +1,2 @@
+@import "../../themes/ionic.globals";
+@import "./slide"
diff --git a/src/components/slides/slides.ios.scss b/src/components/slides/slides.ios.scss
@@ -0,0 +1,2 @@
+@import "../../themes/ionic.globals";
+@import "./slides"
diff --git a/src/components/slides/slides.md.scss b/src/components/slides/slides.md.scss
@@ -0,0 +1,2 @@
+@import "../../themes/ionic.globals";
+@import "./slides"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "../../themes/ionic.globals";
		@import "./slide"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "../../themes/ionic.globals";
		@import "./slides"