ionic-team · averyjohnston · 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