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

Commit e2b8143

Browse files
author
Łukasz Florczak
authored
Update README.md
1 parent 2fe6cca commit e2b8143

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

README.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ If you like the component remember to **star it** ⭐️. If you appreciate my w
1919

2020
## Important – update from version < `1.0`
2121

22-
**Depreciated props => new props/option:**
22+
#### Depreciated props => new props/option
2323
* `arrows` => `navButtons`
2424
* `prevArrow` => `prevButton` slot
2525
* `nextArrow` => `nextButton` slot
2626
* `show` => `reload()` method
2727

28-
**Depreciated classes => new classes:**
28+
#### Depreciated classes => new classes
2929
* `.agile__arrow` => `.agile__nav-button`
3030
* `.agile__arrow--prev` => `.agile__nav-button--prev`
3131
* `.agile__arrow--next` => `.agile__nav-button--next`
3232
* `.agile__slide--cloned` => cloned slides are grouped in `.agile__slides--cloned` container now
3333

34-
**Structure:**
34+
#### Structure
3535
* Nav buttons and dots are grouped in `.agile__actions` container now
3636

3737
## Installation
@@ -52,7 +52,7 @@ npm install vue-agile
5252

5353
## Importing
5454

55-
**Global:**
55+
#### Global
5656

5757
```js
5858
// main.js
@@ -62,7 +62,7 @@ import VueAgile from 'vue-agile'
6262
Vue.use(VueAgile)
6363
```
6464

65-
**In component:**
65+
#### In component
6666
```js
6767
// YourComponent.vue
6868
import { VueAgile } from 'vue-agile'
@@ -74,7 +74,7 @@ export default {
7474
}
7575
```
7676

77-
**Via `<script>`**:
77+
#### Via `<script>`
7878

7979
```html
8080
<script src="https://unpkg.com/vue-agile"></script>
@@ -101,7 +101,7 @@ export default {
101101

102102
Every first-level child of `<agile>` is a new slide. You also can group them inside `<template v-slot:default>...</template>` tags.
103103

104-
## Options
104+
## Options / Props
105105
| Parameter | Type | Default | Description |
106106
| --- | :---: | :---: | --- |
107107
| [asNavFor](#asNavFor) | array | `[]` | Set the carousel to be the navigation of other carousels |
@@ -124,7 +124,7 @@ Every first-level child of `<agile>` is a new slide. You also can group them ins
124124
| timing | string | `ease` | Transition timing function <br> (`linear`/`ease`/`ease-in`/`ease-out`/`ease-in-out`) |
125125
| unagile | boolean | `false` | Disable Agile carousel |
126126

127-
### Example
127+
#### Example
128128

129129
```vue
130130
<agile :dots="false" :infinite="false" :autoplay-speed="5000">...</agile>
@@ -145,7 +145,7 @@ Every first-level child of `<agile>` is a new slide. You also can group them ins
145145
| `goToPrev()` | Navigate to previous slide |
146146
| `reload()` | Reload carousel & slides settings, classes and inline styles |
147147

148-
### Example
148+
#### Example
149149

150150
```vue
151151
<agile ref="carousel">...</agile>
@@ -161,7 +161,7 @@ Every first-level child of `<agile>` is a new slide. You also can group them ins
161161
| beforeChange | `{ currentSlide, nextSlide }` | Fires before slide change |
162162
| breakpoint | `{ breakpoint } ` | Fires after breakpoint change |
163163

164-
### Example
164+
#### Example
165165

166166
```vue
167167
<agile @afterChange="showCurrentSlide($event)">...</agile>
@@ -178,7 +178,7 @@ showCurrentSlide (event) {
178178

179179
To customize responsiveness, I recommend defining your desired breakpoints and passing a settings object with your modification options inside **options**.
180180

181-
### Example
181+
#### Example
182182

183183
```vue
184184
<agile :options="myOptions">...</agile>
@@ -218,7 +218,7 @@ How does it work? Mobile first mode is used by default. It means, that `navButto
218218

219219
From version `1.0` the component use slots for custom navigation buttons. It means you can put inside whatever you want – any HTML with text, image, icon etc.
220220

221-
### Example
221+
#### Example
222222

223223
```vue
224224
<agile>
@@ -233,7 +233,7 @@ From version `1.0` the component use slots for custom navigation buttons. It mea
233233

234234
This option is useful for example for creating a photo gallery with two related slider – one big with only one slide in view and second for navigation with thumbnails.
235235

236-
### Example
236+
#### Example
237237

238238
```vue
239239
<agile ref="main" :fade="true">...</agile>
@@ -249,7 +249,7 @@ If you have slides being dynamically loaded, use `v-if` to show the carousel aft
249249

250250
It is also possible to use `v-show`, but you have to use the `reload()` method.
251251

252-
### Example
252+
#### Example
253253
```vue
254254
<button @click="isActive = !isActive">Toggle carousel</button>
255255
@@ -262,7 +262,7 @@ The component uses browser specific attributes (like `window` and `document`). U
262262

263263
Full support for Nuxt.js is a known issue that will be addressed in a next version.
264264

265-
### Example
265+
#### Example
266266

267267
```js
268268
// plugins/vue-agile.js

0 commit comments

Comments
 (0)