ionic-team · averyrousseau · Sep 1, 2022 · Aug 31, 2022 · Aug 31, 2022 · Aug 31, 2022
diff --git a/BREAKING.md b/BREAKING.md
@@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Components](#version-7x-components)
  - [Overlays](#version-7x-overlays)
  - [Virtual Scroll](#version-7x-virtual-scroll)
+ - [Slides](#version-7x-slides)
 - [Browser and Platform Support](#version-7x-browser-platform-support)
 - [Utilities](#version-7x-utilities)
  - [hidden attribute](#version-7x-hidden-attribute)
@@ -37,6 +38,16 @@ Developers using the component will need to migrate to a virtual scroll solution
 
 Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
 
+<h4 id="version-7x-slides">Slides</h4>
+
+`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
+
+Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
+
+- [Angular](https://ionicframework.com/docs/angular/slides)
+- [React](https://ionicframework.com/docs/react/slides)
+- [Vue](https://ionicframework.com/docs/vue/slides)
+
 <h4 id="version-7x-browser-platform-support">Browser and Platform Support</h4>
 
 This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.

diff --git a/angular/src/directives/proxies-list.ts b/angular/src/directives/proxies-list.ts
@@ -65,8 +65,6 @@ export const DIRECTIVES = [
  d.IonSelect,
  d.IonSelectOption,
  d.IonSkeletonText,
- d.IonSlide,
- d.IonSlides,
  d.IonSpinner,
  d.IonSplitPane,
  d.IonTabBar,

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -1681,114 +1681,6 @@ export class IonSkeletonText {
 }
 
 
-export declare interface IonSlide extends Components.IonSlide {}
-
-@ProxyCmp({
- defineCustomElementFn: undefined
-})
-@Component({
- selector: 'ion-slide',
- changeDetection: ChangeDetectionStrategy.OnPush,
- template: '<ng-content></ng-content>'
-})
-export class IonSlide {
- protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- }
-}
-
-
-export declare interface IonSlides extends Components.IonSlides {
- /**
- * Emitted after Swiper initialization 
- */
- ionSlidesDidLoad: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the user taps/clicks on the slide's container. 
- */
- ionSlideTap: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the user double taps on the slide's container. 
- */
- ionSlideDoubleTap: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted before the active slide has changed. 
- */
- ionSlideWillChange: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted after the active slide has changed. 
- */
- ionSlideDidChange: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the next slide has started. 
- */
- ionSlideNextStart: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the previous slide has started. 
- */
- ionSlidePrevStart: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the next slide has ended. 
- */
- ionSlideNextEnd: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the previous slide has ended. 
- */
- ionSlidePrevEnd: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the slide transition has started. 
- */
- ionSlideTransitionStart: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the slide transition has ended. 
- */
- ionSlideTransitionEnd: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the slider is actively being moved. 
- */
- ionSlideDrag: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the slider is at its initial position. 
- */
- ionSlideReachStart: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the slider is at the last slide. 
- */
- ionSlideReachEnd: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the user first touches the slider. 
- */
- ionSlideTouchStart: EventEmitter<CustomEvent<void>>;
- /**
- * Emitted when the user releases the touch. 
- */
- ionSlideTouchEnd: EventEmitter<CustomEvent<void>>;
-
-}
-
-@ProxyCmp({
- defineCustomElementFn: undefined,
- inputs: ['mode', 'options', 'pager', 'scrollbar'],
- methods: ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']
-})
-@Component({
- selector: 'ion-slides',
- changeDetection: ChangeDetectionStrategy.OnPush,
- template: '<ng-content></ng-content>',
- inputs: ['mode', 'options', 'pager', 'scrollbar']
-})
-export class IonSlides {
- protected el: HTMLElement;
- constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
- c.detach();
- this.el = r.nativeElement;
- proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
- }
-}
-
-
 export declare interface IonSpinner extends Components.IonSpinner {}
 
 @ProxyCmp({

diff --git a/angular/src/index.ts b/angular/src/index.ts
@@ -50,7 +50,6 @@ export {
  createGesture,
  iosTransitionAnimation,
  mdTransitionAnimation,
- IonicSwiper,
  IonicSlides,
  getPlatforms,
  isPlatform,

diff --git a/angular/test/base/e2e/src/slides.spec.ts b/angular/test/base/e2e/src/slides.spec.ts
diff --git a/angular/test/base/src/app/app-routing.module.ts b/angular/test/base/src/app/app-routing.module.ts
@@ -12,7 +12,6 @@ import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-pa
 import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
 import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
-import { SlidesComponent } from './slides/slides.component';
 import { FormComponent } from './form/form.component';
 import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
@@ -37,7 +36,6 @@ const routes: Routes = [
  { path: 'router-link-page', component: RouterLinkPageComponent },
  { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
  { path: 'router-link-page3', component: RouterLinkPage3Component },
- { path: 'slides', component: SlidesComponent },
  { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
  {
  path: 'navigation',

diff --git a/angular/test/base/src/app/app.module.ts b/angular/test/base/src/app/app.module.ts
@@ -21,7 +21,6 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-
 import { NavComponent } from './nav/nav.component';
 import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
-import { SlidesComponent } from './slides/slides.component';
 import { FormComponent } from './form/form.component';
 import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
@@ -47,7 +46,6 @@ import { AccordionModalComponent } from './accordion/accordion-modal/accordion-m
  NavComponent,
  ViewChildComponent,
  ProvidersComponent,
- SlidesComponent,
  FormComponent,
  NavigationPage1Component,
  NavigationPage2Component,

diff --git a/angular/test/base/src/app/home-page/home-page.component.html b/angular/test/base/src/app/home-page/home-page.component.html
@@ -37,11 +37,6 @@
  Tabs test
  </ion-label>
  </ion-item>
- <ion-item routerLink="/slides">
- <ion-label>
- Slides test
- </ion-label>
- </ion-item>
  <ion-item routerLink="/nested-outlet/page">
  <ion-label>
  Nested ion-router-outlet

diff --git a/angular/test/base/src/app/slides/slides.component.html b/angular/test/base/src/app/slides/slides.component.html
diff --git a/angular/test/base/src/app/slides/slides.component.ts b/angular/test/base/src/app/slides/slides.component.ts
diff --git a/angular/test/base/src/app/view-child/view-child.component.html b/angular/test/base/src/app/view-child/view-child.component.html
@@ -6,15 +6,7 @@
  </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
- <ion-slides>
- <ion-slide #slide>
- <ion-button id="color-button">Hello! it's a button</ion-button>
- <div #div id="tabs-result"></div>
- <ion-tabs>
- </ion-tabs>
- </ion-slide>
- <ion-slide>
- <h1>Second slide</h1>
- </ion-slide>
- </ion-slides>
+ <ion-button id="color-button">Hello! it's a button</ion-button>
+ <div #div id="tabs-result"></div>
+ <ion-tabs></ion-tabs>
 </ion-content>
diff --git a/angular/test/base/src/app/view-child/view-child.component.ts b/angular/test/base/src/app/view-child/view-child.component.ts
@@ -1,20 +1,18 @@
 import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
-import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular';
+import { IonTabs, IonButton } from '@ionic/angular';
 
 @Component({
  selector: 'app-view-child',
  templateUrl: './view-child.component.html'
 })
 export class ViewChildComponent implements AfterViewInit {
 
- @ViewChild(IonSlides, { static: true }) slides: IonSlides;
  @ViewChild(IonButton, { static: true }) button: IonButton;
  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;
  @ViewChild('div', { static: true }) div: ElementRef;
- @ViewChild('slide', { static: true }) slide: IonSlide;
 
  ngAfterViewInit() {
- const loaded = !!(this.slides && this.button && this.tabs && this.div && this.slide);
+ const loaded = !!(this.button && this.tabs && this.div);
  this.button.color = 'danger';
  if (loaded) {
  this.div.nativeElement.textContent = 'all found';

diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml
@@ -8,7 +8,6 @@ ignoreFiles:
  - src/css/normalize.scss
  - src/css/text-alignment.scss
  - src/css/display.scss
- - src/components/slides/slides-vendor.scss
  - src/themes/ionic.mixins.scss
  - src/themes/ionic.functions.color.scss
  - src/themes/ionic.functions.string.scss