feat(slides): add support for Swiper 7 (#24190)

Author: liamdebeasi

angular/src/index.ts

@@ -43,7 +43,7 @@ export * from './types/ionic-lifecycle-hooks';
 export { IonicModule } from './ionic-module';
 
 // UTILS
-export { IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper } from '@ionic/core';
+export { IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper, IonicSlides } from '@ionic/core';
 
 // CORE TYPES
 export {

core/src/components/slides/IonicSlides.ts

@@ -0,0 +1,102 @@
+export const IonicSlides = (opts: any) => {
+  const { swiper, extendParams } = opts;
+  const slidesParams: any = {
+    effect: undefined,
+    direction: 'horizontal',
+    initialSlide: 0,
+    loop: false,
+    parallax: false,
+    slidesPerView: 1,
+    spaceBetween: 0,
+    speed: 300,
+    slidesPerColumn: 1,
+    slidesPerColumnFill: 'column',
+    slidesPerGroup: 1,
+    centeredSlides: false,
+    slidesOffsetBefore: 0,
+    slidesOffsetAfter: 0,
+    touchEventsTarget: 'container',
+    autoplay: false,
+    freeMode: false,
+    freeModeMomentum: true,
+    freeModeMomentumRatio: 1,
+    freeModeMomentumBounce: true,
+    freeModeMomentumBounceRatio: 1,
+    freeModeMomentumVelocityRatio: 1,
+    freeModeSticky: false,
+    freeModeMinimumVelocity: 0.02,
+    autoHeight: false,
+    setWrapperSize: false,
+    zoom: {
+      maxRatio: 3,
+      minRatio: 1,
+      toggle: false,
+    },
+    touchRatio: 1,
+    touchAngle: 45,
+    simulateTouch: true,
+    touchStartPreventDefault: false,
+    shortSwipes: true,
+    longSwipes: true,
+    longSwipesRatio: 0.5,
+    longSwipesMs: 300,
+    followFinger: true,
+    threshold: 0,
+    touchMoveStopPropagation: true,
+    touchReleaseOnEdges: false,
+    iOSEdgeSwipeDetection: false,
+    iOSEdgeSwipeThreshold: 20,
+    resistance: true,
+    resistanceRatio: 0.85,
+    watchSlidesProgress: false,
+    watchSlidesVisibility: false,
+    preventClicks: true,
+    preventClicksPropagation: true,
+    slideToClickedSlide: false,
+    loopAdditionalSlides: 0,
+    noSwiping: true,
+    runCallbacksOnInit: true,
+    coverflowEffect: {
+      rotate: 50,
+      stretch: 0,
+      depth: 100,
+      modifier: 1,
+      slideShadows: true
+    },
+    flipEffect: {
+      slideShadows: true,
+      limitRotation: true
+    },
+    cubeEffect: {
+      slideShadows: true,
+      shadow: true,
+      shadowOffset: 20,
+      shadowScale: 0.94
+    },
+    fadeEffect: {
+      crossFade: false
+    },
+    a11y: {
+      prevSlideMessage: 'Previous slide',
+      nextSlideMessage: 'Next slide',
+      firstSlideMessage: 'This is the first slide',
+      lastSlideMessage: 'This is the last slide'
+    }
+  }
+
+  if (swiper.pagination) {
+    slidesParams.pagination = {
+      type: 'bullets',
+      clickable: false,
+      hideOnClick: false,
+    }
+  }
+
+  if (swiper.scrollbar) {
+    slidesParams.scrollbar = {
+      hide: true
+    }
+  }
+
+  extendParams(slidesParams);
+}

core/src/components/slides/IonicSwiper.ts

@@ -120,6 +120,8 @@ export const IonicSwiper = {
   name: 'ionic',
   on: {
     afterInit(swiper: any) {
+      console.warn('[Deprecation Warning]: The IonicSwiper module has been deprecated in favor of the IonSlides module. This change was made to better support the Swiper 7 release. The IonicSwiper module will be removed in Ionic 7.0. See https://ionicframework.com/docs/api/slides#migration for revised migration steps.');
+
       setupSwiperInIonic(swiper);
     }
   }

core/src/css/ionic-swiper.scss

@@ -4,7 +4,7 @@
 // Slides
 // --------------------------------------------------
 
-.swiper-container {
+.swiper {
 
   // These values are the same for iOS and MD
   // We just do not add a .md or .ios class beforehand
@@ -33,56 +33,49 @@
 // Pagination Bullets
 // --------------------------------------------------
 
-.swiper-pagination-bullet {
+.swiper .swiper-pagination-bullet {
   background: var(--bullet-background);
 }
 
-.swiper-pagination-bullet-active {
+.swiper .swiper-pagination-bullet-active {
   background: var(--bullet-background-active);
 }
 
 
 // Pagination Progress Bar
 // --------------------------------------------------
 
-.swiper-pagination-progressbar {
+.swiper .swiper-pagination-progressbar {
   background: var(--progress-bar-background);
 }
 
-.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   background: var(--progress-bar-background-active);
 }
 
 // Scrollbar
 // --------------------------------------------------
 
-.swiper-scrollbar {
+.swiper .swiper-scrollbar {
   background: var(--scroll-bar-background);
 }
 
-.swiper-scrollbar-drag {
+.swiper .swiper-scrollbar-drag {
   background: var(--scroll-bar-background-active);
 }
 
 // Slide
 // --------------------------------------------------
 
-ion-slide {
-  display: block;
-
-  width: 100%;
-  height: 100%;
-}
-
-.slide-zoom {
+.swiper .slide-zoom {
   display: block;
 
   width: 100%;
 
   text-align: center;
 }
 
-.swiper-slide {
+.swiper .swiper-slide {
 
   // Center slide text vertically
   display: flex;
@@ -101,7 +94,7 @@ ion-slide {
   box-sizing: border-box;
 }
 
-.swiper-slide img {
+.swiper .swiper-slide img {
   width: auto;
   max-width: 100%;
   height: auto;

core/src/index.ts

@@ -14,3 +14,4 @@ export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECY
 export { menuController } from './utils/menu-controller';
 export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController } from './utils/overlays';
 export { IonicSwiper } from './components/slides/IonicSwiper';
+export { IonicSlides } from './components/slides/IonicSlides';

packages/react/src/components/index.ts

@@ -34,6 +34,7 @@ export {
   NavComponentWithProps,
   setupConfig,
   IonicSwiper,
+  IonicSlides,
 
   SpinnerTypes,
 

packages/vue/src/index.ts

@@ -74,6 +74,7 @@ export {
 
   // Swiper
   IonicSwiper,
+  IonicSlides,
 
   SpinnerTypes,