fix(slides): update events to match swipers

Closes #14865

core/src/components/slides/readme.md

@@ -74,6 +74,11 @@ If true, show the scrollbar. Defaults to `false`.
 Emitted after the active slide has changed.
 
 
+#### ionSlideDoubleTap
+
+Emitted when the user double taps on the slide's container.
+
+
 #### ionSlideDrag
 
 Emitted when the slider is actively being moved.
@@ -109,6 +114,11 @@ Emitted when the slider is at the last slide.
 Emitted when the slider is at its initial position.
 
 
+#### ionSlideTap
+
+Emitted when the user taps/clicks on the slide's container.
+
+
 #### ionSlideTouchEnd
 
 Emitted when the user releases the touch.
@@ -134,6 +144,11 @@ Emitted when the slide transition has started.
 Emitted before the active slide has changed.
 
 
+#### ionSlidesDidLoad
+
+Emitted after Swiper initialization
+
+
 ## Methods
 
 #### getActiveIndex()

core/src/components/slides/slides.tsx

@@ -22,6 +22,21 @@ export class Slides {
 
   @Element() el!: HTMLStencilElement;
 
+  /**
+   * Emitted after Swiper initialization
+   */
+  @Event() ionSlidesDidLoad!: EventEmitter;
+
+  /**
+   * Emitted when the user taps/clicks on the slide's container.
+   */
+  @Event() ionSlideTap!: EventEmitter;
+
+  /**
+   * Emitted when the user double taps on the slide's container.
+   */
+  @Event() ionSlideDoubleTap!: EventEmitter;
+
   /**
    * Emitted before the active slide has changed.
    */
@@ -262,7 +277,7 @@ export class Slides {
       },
       parallax: false,
       scrollbar: {
-        el: '.swiper-scrollbar',
+        el: this.scrollbar ? '.swiper-scrollbar' : null,
         hide: true,
       },
       slidesPerView: 1,
@@ -348,19 +363,28 @@ export class Slides {
     // Keep the event options separate, we dont want users
     // overwriting these
     const eventOptions = {
-      onSlideChangeStart: this.ionSlideWillChange.emit,
-      onSlideChangeEnd: this.ionSlideDidChange.emit,
-      onSlideNextStart: this.ionSlideNextStart.emit,
-      onSlidePrevStart: this.ionSlidePrevStart.emit,
-      onSlideNextEnd: this.ionSlideNextEnd.emit,
-      onSlidePrevEnd: this.ionSlidePrevEnd.emit,
-      onTransitionStart: this.ionSlideTransitionStart.emit,
-      onTransitionEnd: this.ionSlideTransitionEnd.emit,
-      onSliderMove: this.ionSlideDrag.emit,
-      onReachBeginning: this.ionSlideReachStart.emit,
-      onReachEnd: this.ionSlideReachEnd.emit,
-      onTouchStart: this.ionSlideTouchStart.emit,
-      onTouchEnd: this.ionSlideTouchEnd.emit
+      on: {
+        init: () => {
+          setTimeout(() => {
+            this.ionSlidesDidLoad.emit();
+          }, 20);
+        },
+        slideChangeTransitionStart: this.ionSlideWillChange.emit,
+        slideChangeTransitionEnd: this.ionSlideDidChange.emit,
+        slideNextTransitionStart: this.ionSlideNextStart.emit,
+        slidePrevTransitionStart: this.ionSlidePrevStart.emit,
+        slideNextTransitionEnd: this.ionSlideNextEnd.emit,
+        slidePrevTransitionEnd: this.ionSlidePrevEnd.emit,
+        transitionStart: this.ionSlideTransitionStart.emit,
+        transitionEnd: this.ionSlideTransitionEnd.emit,
+        sliderMove: this.ionSlideDrag.emit,
+        reachBeginning: this.ionSlideReachStart.emit,
+        reachEnd: this.ionSlideReachEnd.emit,
+        touchStart: this.ionSlideTouchStart.emit,
+        touchEnd: this.ionSlideTouchEnd.emit,
+        tap: this.ionSlideTap.emit,
+        doubleTap: this.ionSlideDoubleTap.emit
+      }
     };
 
     // Merge the base, user options, and events together then pas to swiper

core/src/components/slides/test/basic/index.html

@@ -142,6 +142,15 @@
     slides.addEventListener('ionSlideTouchEnd', function (e) {
       console.log('slide touch end', e)
     });
+    slides.addEventListener('ionSlidesDidLoad', function (e) {
+      console.log('slides did load', e)
+    });
+    slides.addEventListener('ionSlideTap', function (e) {
+      console.log('slide tapped', e)
+    });
+    slides.addEventListener('ionSlideDoubleTap', function (e) {
+      console.log('slide double-tapped', e)
+    });
   </script>
 </body>