From 578cc5fdc652b867a928d1fa81de0243e53c525b Mon Sep 17 00:00:00 2001
From: Elvis Fernando <insoutt@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:45:19 -0500
Subject: [PATCH 1/2] Update slides.md

Fix the import of modules, according to the documentation [https://swiperjs.com/swiper-api#custom-build](Swiper Modules)
---
 docs/react/slides.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/react/slides.md b/docs/react/slides.md
index 9d1c37d4c3f..9f4e175c5ef 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -159,7 +159,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -191,7 +191,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -223,7 +223,7 @@ Finally, we can turn these features on by using the appropriate properties:
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -272,7 +272,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/react` and
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';

From 075174f596cd170d4b328c70a8dbe9e4936f3fe1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Oct 2024 12:07:26 -0400
Subject: [PATCH 2/2] docs(slides): update imports for modules

---
 docs/react/slides.md                      |  6 +++---
 docs/vue/slides.md                        | 14 +++++++-------
 versioned_docs/version-v7/react/slides.md | 16 ++++++++--------
 versioned_docs/version-v7/vue/slides.md   | 14 +++++++-------
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/docs/react/slides.md b/docs/react/slides.md
index 9f4e175c5ef..db71dadd7b4 100644
--- a/docs/react/slides.md
+++ b/docs/react/slides.md
@@ -466,7 +466,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { EffectFade } from 'swiper';
+import { EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
@@ -493,7 +493,7 @@ Next, we need to import the stylesheet associated with the effect:
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { EffectFade } from 'swiper';
+import { EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
@@ -521,7 +521,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { EffectFade } from 'swiper';
+import { EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
diff --git a/docs/vue/slides.md b/docs/vue/slides.md
index 946b39dec4a..fab18e0cb1a 100644
--- a/docs/vue/slides.md
+++ b/docs/vue/slides.md
@@ -152,7 +152,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
@@ -186,7 +186,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
@@ -225,7 +225,7 @@ Finally, we can turn these features on by using the appropriate properties:
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
@@ -274,7 +274,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
@@ -457,7 +457,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { EffectFade } from 'swiper';
+  import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
@@ -491,7 +491,7 @@ Next, we need to import the stylesheet associated with the effect:
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { EffectFade } from 'swiper';
+  import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
@@ -526,7 +526,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { EffectFade } from 'swiper';
+  import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
diff --git a/versioned_docs/version-v7/react/slides.md b/versioned_docs/version-v7/react/slides.md
index bd0a907c190..98d64724166 100644
--- a/versioned_docs/version-v7/react/slides.md
+++ b/versioned_docs/version-v7/react/slides.md
@@ -159,7 +159,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -191,7 +191,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -223,7 +223,7 @@ Finally, we can turn these features on by using the appropriate properties:
 import React from 'react';
 import { IonContent, IonPage } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -272,7 +272,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/react` and
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
 
 import 'swiper/css';
 import 'swiper/css/autoplay';
@@ -425,7 +425,7 @@ Accessing these properties can be tricky as you want to access the properties on
 ```tsx
 import React, { useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Swiper as SwiperInterface } from 'swiper';
+import { Swiper as SwiperInterface } from 'swiper/modules';
 ...
 const Home: React.FC = () => {
   const [swiperInstance, setSwiperInstance] = useState<SwiperInterface>();
@@ -466,7 +466,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { EffectFade } from 'swiper';
+import { EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
@@ -493,7 +493,7 @@ Next, we need to import the stylesheet associated with the effect:
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { EffectFade } from 'swiper';
+import { EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
@@ -521,7 +521,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
 ```tsx
 import React from 'react';
 import { IonContent, IonPage, IonicSlides } from '@ionic/react';
-import { EffectFade } from 'swiper';
+import { EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/css';
diff --git a/versioned_docs/version-v7/vue/slides.md b/versioned_docs/version-v7/vue/slides.md
index 4fb4af5e911..1c62f3f8188 100644
--- a/versioned_docs/version-v7/vue/slides.md
+++ b/versioned_docs/version-v7/vue/slides.md
@@ -152,7 +152,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
@@ -186,7 +186,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
@@ -225,7 +225,7 @@ Finally, we can turn these features on by using the appropriate properties:
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage } from '@ionic/vue';
 
@@ -274,7 +274,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+  import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
@@ -457,7 +457,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { EffectFade } from 'swiper';
+  import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
@@ -491,7 +491,7 @@ Next, we need to import the stylesheet associated with the effect:
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { EffectFade } from 'swiper';
+  import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
 
@@ -526,7 +526,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { EffectFade } from 'swiper';
+  import { EffectFade } from 'swiper/modules';
   import { Swiper, SwiperSlide } from 'swiper/vue';
   import { IonContent, IonPage, IonicSlides } from '@ionic/vue';