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

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);
     }
   }