Skip to content

Commit

Permalink
docs(slides): update imports for modules (#3806)
Browse files Browse the repository at this point in the history 
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]>
  • Loading branch information
@insoutt @brandyscarney
insoutt and brandyscarney authored Oct 4, 2024
1 parent 7d7c1a0 commit 00abd5e
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 29 deletions.
14 changes: 7 additions & 7 deletions docs/react/slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
14 changes: 7 additions & 7 deletions docs/vue/slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
16 changes: 8 additions & 8 deletions versioned_docs/version-v7/react/slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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>();
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
14 changes: 7 additions & 7 deletions versioned_docs/version-v7/vue/slides.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down

0 comments on commit 00abd5e

Please sign in to comment.