You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/react/slides.md
+16-23
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Slides
2
+
title: Migrating From IonSlides to Swiper.js
3
3
---
4
4
5
5
<head>
@@ -16,12 +16,13 @@ title: Slides
16
16
17
17
:::
18
18
19
-
:::note
20
-
This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
21
-
:::
19
+
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
22
20
21
+
:::note
22
+
Swiper's React component is set to be removed in a future release of Swiper, with <ahref="https://swiperjs.com/element"target="_blank"rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
23
23
24
-
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
24
+
Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
Once that is done, install the Swiper dependency in your project:
35
36
36
37
```shell
37
-
npm install swiper@8
38
+
npm install swiper@latest
38
39
```
39
40
40
41
:::note
@@ -43,7 +44,7 @@ Create React App does not support pure ESM packages yet. Developers can still us
43
44
44
45
## Swiping with Style
45
46
46
-
Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
47
+
Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `IonSlides`.
47
48
48
49
We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
49
50
@@ -64,13 +65,11 @@ export default Home;
64
65
```
65
66
66
67
:::note
67
-
Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
68
+
Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
68
69
:::
69
70
70
71
:::note
71
-
72
72
Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
73
-
74
73
:::
75
74
76
75
### Updating Selectors
@@ -153,16 +152,14 @@ export default Home;
153
152
```
154
153
155
154
:::note
156
-
157
155
Not using Create React App? You can import the Swiper components from `swiper/react` instead.
158
-
159
156
:::
160
157
161
158
## Using Modules
162
159
163
160
By default, Swiper for React does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
164
161
165
-
`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
162
+
`IonSlides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
166
163
167
164
To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
168
165
@@ -197,9 +194,7 @@ export default Home;
197
194
```
198
195
199
196
:::note
200
-
201
197
Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`).
202
-
203
198
:::
204
199
205
200
From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component:
@@ -279,7 +274,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
279
274
280
275
## The IonicSlides Module
281
276
282
-
With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
277
+
With `IonSlides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
283
278
284
279
We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
285
280
@@ -428,7 +423,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper
428
423
| onIonSlidesDidLoad | onInit |
429
424
430
425
:::note
431
-
All events available in Swiper React can be found at <ahref="https://swiperjs.com/react#swiper-events"target="_blank"rel="noopener noreferrer">https://swiperjs.com/react#swiper-events</a>.
426
+
All events available in Swiper can be found at <ahref="https://swiperjs.com/swiper-api#events"target="_blank"rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
432
427
:::
433
428
434
429
## Methods
@@ -460,7 +455,7 @@ From here, if you wanted to access a property on the Swiper instance you would a
460
455
461
456
Below is a full list of method changes when going from `IonSlides` to Swiper React:
Copy file name to clipboardExpand all lines: docs/vue/slides.md
+8-9
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Slides
2
+
title: Migrating From ion-slides to Swiper.js
3
3
---
4
4
5
5
<head>
@@ -11,17 +11,16 @@ title: Slides
11
11
</head>
12
12
13
13
:::caution Looking for `ion-slides`?
14
-
15
14
`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
16
-
17
15
:::
18
16
19
-
:::note
20
-
This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
21
-
:::
17
+
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
22
18
19
+
:::note
20
+
Swiper's Vue component is set to be removed in a future release of Swiper, with <ahref="https://swiperjs.com/element"target="_blank"rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
23
21
24
-
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
22
+
Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
23
+
:::
25
24
26
25
## Getting Started
27
26
@@ -40,7 +39,7 @@ vue upgrade --next
40
39
Once that is done, install the Swiper dependency in your project:
41
40
42
41
```shell
43
-
npm install swiper@8
42
+
npm install swiper@latest
44
43
```
45
44
46
45
## Swiping with Style
@@ -63,7 +62,7 @@ We recommend importing the styles in the component in which Swiper is being used
63
62
```
64
63
65
64
:::note
66
-
Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
65
+
Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
Copy file name to clipboardExpand all lines: versioned_docs/version-v6/react/slides.md
+17-23
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Slides
2
+
title: Migrating From IonSlides to Swiper.js
3
3
---
4
4
5
5
<head>
@@ -10,14 +10,16 @@ title: Slides
10
10
/>
11
11
</head>
12
12
13
-
:::note
14
-
This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
15
-
:::
16
-
17
13
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `IonSlides` component, but we now recommend that developers use Swiper for React directly.
18
14
19
15
This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
20
16
17
+
:::note
18
+
Swiper's React component is set to be removed in a future release of Swiper, with <ahref="https://swiperjs.com/element"target="_blank"rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
19
+
20
+
Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
Once that is done, install the Swiper dependency in your project:
30
32
31
33
```shell
32
-
npm install swiper@8
34
+
npm install swiper@latest
33
35
```
34
36
35
37
:::note
@@ -38,7 +40,7 @@ Create React App does not support pure ESM packages yet. Developers can still us
38
40
39
41
## Swiping with Style
40
42
41
-
Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
43
+
Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `IonSlides`.
42
44
43
45
We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
44
46
@@ -59,13 +61,11 @@ export default Home;
59
61
```
60
62
61
63
:::note
62
-
Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
64
+
Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
63
65
:::
64
66
65
67
:::note
66
-
67
68
Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
68
-
69
69
:::
70
70
71
71
### Updating Selectors
@@ -148,16 +148,14 @@ export default Home;
148
148
```
149
149
150
150
:::note
151
-
152
151
Not using Create React App? You can import the Swiper components from `swiper/react` instead.
153
-
154
152
:::
155
153
156
154
## Using Modules
157
155
158
156
By default, Swiper for React does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
159
157
160
-
`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
158
+
`IonSlides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
161
159
162
160
To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
163
161
@@ -192,9 +190,7 @@ export default Home;
192
190
```
193
191
194
192
:::note
195
-
196
193
Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`).
197
-
198
194
:::
199
195
200
196
From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component:
@@ -274,7 +270,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
274
270
275
271
## The IonicSlides Module
276
272
277
-
With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
273
+
With `IonSlides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
278
274
279
275
We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
280
276
@@ -423,7 +419,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper
423
419
| onIonSlidesDidLoad | onInit |
424
420
425
421
:::note
426
-
All events available in Swiper React can be found at <ahref="https://swiperjs.com/react#swiper-events"target="_blank"rel="noopener noreferrer">https://swiperjs.com/react#swiper-events</a>.
422
+
All events available in Swiper can be found at <ahref="https://swiperjs.com/swiper-api#events"target="_blank"rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
427
423
:::
428
424
429
425
## Methods
@@ -455,7 +451,7 @@ From here, if you wanted to access a property on the Swiper instance you would a
455
451
456
452
Below is a full list of method changes when going from `IonSlides` to Swiper React:
Copy file name to clipboardExpand all lines: versioned_docs/version-v6/vue/slides.md
+9-7
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Slides
2
+
title: Migrating From ion-slides to Swiper.js
3
3
---
4
4
5
5
<head>
@@ -10,14 +10,16 @@ title: Slides
10
10
/>
11
11
</head>
12
12
13
-
:::note
14
-
This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
15
-
:::
16
-
17
13
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Vue directly.
18
14
19
15
This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
20
16
17
+
:::note
18
+
Swiper's Vue component is set to be removed in a future release of Swiper, with <ahref="https://swiperjs.com/element"target="_blank"rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
19
+
20
+
Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
21
+
:::
22
+
21
23
## Getting Started
22
24
23
25
First, update to the latest version of Ionic:
@@ -35,7 +37,7 @@ vue upgrade --next
35
37
Once that is done, install the Swiper dependency in your project:
36
38
37
39
```shell
38
-
npm install swiper@8
40
+
npm install swiper@latest
39
41
```
40
42
41
43
## Swiping with Style
@@ -58,7 +60,7 @@ We recommend importing the styles in the component in which Swiper is being used
58
60
```
59
61
60
62
:::note
61
-
Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
63
+
Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
0 commit comments