Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit aee03be

Browse files
author
Łukasz Florczak
committed
Readme for responsive settings
1 parent a96569b commit aee03be

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,11 @@ Every first-level child of `<agile>` is a new slide.
5555
| dots | boolean | `true` | Enable dot indicators/pagination |
5656
| fade | boolean | `false` | Enable fade effect |
5757
| infinite | boolen | `true` | Infinite loop sliding |
58+
| mobileFirst | boolean | `true` | Enable mobile first calculation for responsive settings |
59+
| options | object | `null` | All settings as object |
5860
| pauseOnHover | boolean | `true` | Pause autoplay when a slide is hovered |
5961
| pauseOnDotsHover | boolean | `false` | Pause autoplay when a dot is hovered |
62+
| responsive | object | `null` | Object containing breakpoints and settings objects |
6063
| speed | integer (ms) | `300` | Slide animation speed in milliseconds |
6164
| timing | string | `ease` | Transition timing function <br> (`linear`/`ease`/`ease-in`/`ease-out`/`ease-in-out`) |
6265

@@ -68,6 +71,46 @@ Every first-level child of `<agile>` is a new slide.
6871
</agile>
6972
```
7073

74+
## Responsive
75+
76+
To use a responsive, I recommend passing settings in options object.
77+
78+
### Example
79+
80+
``` vue
81+
<agile :options="options">
82+
...
83+
</agile>
84+
```
85+
86+
``` js
87+
data () {
88+
return {
89+
options: {
90+
arrows: false,
91+
92+
responsive: [
93+
{
94+
breakpoint: 600,
95+
settings: {
96+
dots: false
97+
}
98+
},
99+
100+
{
101+
breakpoint: 900,
102+
settings: {
103+
arrows: true,
104+
dots: true,
105+
infinite: false
106+
}
107+
}
108+
]
109+
}
110+
}
111+
}
112+
```
113+
71114
## SSR Support
72115

73116
The component uses browser specific attributes (like `window` and `document`). It is necessary, so probably the only option is to run vue-agile only on the client-side. It was tested on [nuxt v1.0.0-rc7](https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc7) and works fine.

0 commit comments

Comments
 (0)