Skip to content

Commit 00abd5e

Browse files
insouttbrandyscarney
insoutt
and
brandyscarney
authored
docs(slides): update imports for modules (#3806)
Fix the import of modules, according to the documentation [https://swiperjs.com/swiper-api#custom-build](Swiper Modules) --------- Co-authored-by: Brandy Carney <[email protected]>
1 parent 7d7c1a0 commit 00abd5e

File tree

4 files changed

+29
-29
lines changed

4 files changed

+29
-29
lines changed

‎docs/react/slides.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
159159
import React from 'react';
160160
import { IonContent, IonPage } from '@ionic/react';
161161
import { Swiper, SwiperSlide } from 'swiper/react';
162-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
162+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
163163

164164
import 'swiper/css';
165165
import 'swiper/css/autoplay';
@@ -191,7 +191,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
191191
import React from 'react';
192192
import { IonContent, IonPage } from '@ionic/react';
193193
import { Swiper, SwiperSlide } from 'swiper/react';
194-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
194+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
195195

196196
import 'swiper/css';
197197
import 'swiper/css/autoplay';
@@ -223,7 +223,7 @@ Finally, we can turn these features on by using the appropriate properties:
223223
import React from 'react';
224224
import { IonContent, IonPage } from '@ionic/react';
225225
import { Swiper, SwiperSlide } from 'swiper/react';
226-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
226+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
227227

228228
import 'swiper/css';
229229
import 'swiper/css/autoplay';
@@ -272,7 +272,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/react` and
272272
import React from 'react';
273273
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
274274
import { Swiper, SwiperSlide } from 'swiper/react';
275-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
275+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
276276

277277
import 'swiper/css';
278278
import 'swiper/css/autoplay';
@@ -466,7 +466,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
466466
```tsx
467467
import React from 'react';
468468
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
469-
import { EffectFade } from 'swiper';
469+
import { EffectFade } from 'swiper/modules';
470470
import { Swiper, SwiperSlide } from 'swiper/react';
471471

472472
import 'swiper/css';
@@ -493,7 +493,7 @@ Next, we need to import the stylesheet associated with the effect:
493493
```tsx
494494
import React from 'react';
495495
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
496-
import { EffectFade } from 'swiper';
496+
import { EffectFade } from 'swiper/modules';
497497
import { Swiper, SwiperSlide } from 'swiper/react';
498498

499499
import 'swiper/css';
@@ -521,7 +521,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
521521
```tsx
522522
import React from 'react';
523523
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
524-
import { EffectFade } from 'swiper';
524+
import { EffectFade } from 'swiper/modules';
525525
import { Swiper, SwiperSlide } from 'swiper/react';
526526

527527
import 'swiper/css';

‎docs/vue/slides.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
152152
</template>
153153
<script>
154154
import { defineComponent } from 'vue';
155-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
155+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
156156
import { Swiper, SwiperSlide } from 'swiper/vue';
157157
import { IonContent, IonPage } from '@ionic/vue';
158158
@@ -186,7 +186,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
186186
</template>
187187
<script>
188188
import { defineComponent } from 'vue';
189-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
189+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
190190
import { Swiper, SwiperSlide } from 'swiper/vue';
191191
import { IonContent, IonPage } from '@ionic/vue';
192192
@@ -225,7 +225,7 @@ Finally, we can turn these features on by using the appropriate properties:
225225
</template>
226226
<script>
227227
import { defineComponent } from 'vue';
228-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
228+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
229229
import { Swiper, SwiperSlide } from 'swiper/vue';
230230
import { IonContent, IonPage } from '@ionic/vue';
231231
@@ -274,7 +274,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
274274
</template>
275275
<script>
276276
import { defineComponent } from 'vue';
277-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
277+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
278278
import { Swiper, SwiperSlide } from 'swiper/vue';
279279
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
280280
@@ -457,7 +457,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
457457
</template>
458458
<script>
459459
import { defineComponent } from 'vue';
460-
import { EffectFade } from 'swiper';
460+
import { EffectFade } from 'swiper/modules';
461461
import { Swiper, SwiperSlide } from 'swiper/vue';
462462
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
463463
@@ -491,7 +491,7 @@ Next, we need to import the stylesheet associated with the effect:
491491
</template>
492492
<script>
493493
import { defineComponent } from 'vue';
494-
import { EffectFade } from 'swiper';
494+
import { EffectFade } from 'swiper/modules';
495495
import { Swiper, SwiperSlide } from 'swiper/vue';
496496
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
497497
@@ -526,7 +526,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
526526
</template>
527527
<script>
528528
import { defineComponent } from 'vue';
529-
import { EffectFade } from 'swiper';
529+
import { EffectFade } from 'swiper/modules';
530530
import { Swiper, SwiperSlide } from 'swiper/vue';
531531
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
532532

‎versioned_docs/version-v7/react/slides.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
159159
import React from 'react';
160160
import { IonContent, IonPage } from '@ionic/react';
161161
import { Swiper, SwiperSlide } from 'swiper/react';
162-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
162+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
163163

164164
import 'swiper/css';
165165
import 'swiper/css/autoplay';
@@ -191,7 +191,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
191191
import React from 'react';
192192
import { IonContent, IonPage } from '@ionic/react';
193193
import { Swiper, SwiperSlide } from 'swiper/react';
194-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
194+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
195195

196196
import 'swiper/css';
197197
import 'swiper/css/autoplay';
@@ -223,7 +223,7 @@ Finally, we can turn these features on by using the appropriate properties:
223223
import React from 'react';
224224
import { IonContent, IonPage } from '@ionic/react';
225225
import { Swiper, SwiperSlide } from 'swiper/react';
226-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
226+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
227227

228228
import 'swiper/css';
229229
import 'swiper/css/autoplay';
@@ -272,7 +272,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/react` and
272272
import React from 'react';
273273
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
274274
import { Swiper, SwiperSlide } from 'swiper/react';
275-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
275+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
276276

277277
import 'swiper/css';
278278
import 'swiper/css/autoplay';
@@ -425,7 +425,7 @@ Accessing these properties can be tricky as you want to access the properties on
425425
```tsx
426426
import React, { useState } from 'react';
427427
import { Swiper, SwiperSlide } from 'swiper/react';
428-
import { Swiper as SwiperInterface } from 'swiper';
428+
import { Swiper as SwiperInterface } from 'swiper/modules';
429429
...
430430
const Home: React.FC = () => {
431431
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
466466
```tsx
467467
import React from 'react';
468468
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
469-
import { EffectFade } from 'swiper';
469+
import { EffectFade } from 'swiper/modules';
470470
import { Swiper, SwiperSlide } from 'swiper/react';
471471

472472
import 'swiper/css';
@@ -493,7 +493,7 @@ Next, we need to import the stylesheet associated with the effect:
493493
```tsx
494494
import React from 'react';
495495
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
496-
import { EffectFade } from 'swiper';
496+
import { EffectFade } from 'swiper/modules';
497497
import { Swiper, SwiperSlide } from 'swiper/react';
498498

499499
import 'swiper/css';
@@ -521,7 +521,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
521521
```tsx
522522
import React from 'react';
523523
import { IonContent, IonPage, IonicSlides } from '@ionic/react';
524-
import { EffectFade } from 'swiper';
524+
import { EffectFade } from 'swiper/modules';
525525
import { Swiper, SwiperSlide } from 'swiper/react';
526526

527527
import 'swiper/css';

‎versioned_docs/version-v7/vue/slides.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ To begin, we need to import the modules and their corresponding CSS files from t
152152
</template>
153153
<script>
154154
import { defineComponent } from 'vue';
155-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
155+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
156156
import { Swiper, SwiperSlide } from 'swiper/vue';
157157
import { IonContent, IonPage } from '@ionic/vue';
158158
@@ -186,7 +186,7 @@ From here, we need to provide these modules to Swiper by using the `modules` pro
186186
</template>
187187
<script>
188188
import { defineComponent } from 'vue';
189-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
189+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
190190
import { Swiper, SwiperSlide } from 'swiper/vue';
191191
import { IonContent, IonPage } from '@ionic/vue';
192192
@@ -225,7 +225,7 @@ Finally, we can turn these features on by using the appropriate properties:
225225
</template>
226226
<script>
227227
import { defineComponent } from 'vue';
228-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
228+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
229229
import { Swiper, SwiperSlide } from 'swiper/vue';
230230
import { IonContent, IonPage } from '@ionic/vue';
231231
@@ -274,7 +274,7 @@ We can install the `IonicSlides` module by importing it from `@ionic/vue` and pa
274274
</template>
275275
<script>
276276
import { defineComponent } from 'vue';
277-
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
277+
import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
278278
import { Swiper, SwiperSlide } from 'swiper/vue';
279279
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
280280
@@ -457,7 +457,7 @@ If you are using effects such as Cube or Fade, you can install them just like we
457457
</template>
458458
<script>
459459
import { defineComponent } from 'vue';
460-
import { EffectFade } from 'swiper';
460+
import { EffectFade } from 'swiper/modules';
461461
import { Swiper, SwiperSlide } from 'swiper/vue';
462462
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
463463
@@ -491,7 +491,7 @@ Next, we need to import the stylesheet associated with the effect:
491491
</template>
492492
<script>
493493
import { defineComponent } from 'vue';
494-
import { EffectFade } from 'swiper';
494+
import { EffectFade } from 'swiper/modules';
495495
import { Swiper, SwiperSlide } from 'swiper/vue';
496496
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
497497
@@ -526,7 +526,7 @@ After that, we can activate it by setting the `effect` property on `swiper` to `
526526
</template>
527527
<script>
528528
import { defineComponent } from 'vue';
529-
import { EffectFade } from 'swiper';
529+
import { EffectFade } from 'swiper/modules';
530530
import { Swiper, SwiperSlide } from 'swiper/vue';
531531
import { IonContent, IonPage, IonicSlides } from '@ionic/vue';
532532

0 commit comments

Comments
 (0)