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

Commit fa1b99a

Browse files
lukaszflorczaklukaszflorczak
committed
Update README.md
1 parent ae5765a commit fa1b99a

File tree

1 file changed

+98
-100
lines changed

1 file changed

+98
-100
lines changed

‎README.md

+98-100
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# vue-agile
1+
# vue-agile
22

33
[![](https://img.shields.io/npm/v/vue-agile.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vue-agile) [![](https://img.shields.io/npm/l/vue-agile.svg?style=flat-square&logo=github)](https://github.com/lukaszflorczak/vue-agile/blob/master/LICENSE) [![](https://img.shields.io/codacy/grade/509a536ebcf64a71a119e988bd888af2.svg?style=flat-square&logo=codacy)](https://app.codacy.com/project/lukaszflorczak/vue-agile/dashboard) [![](https://img.shields.io/npm/dm/vue-agile.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/vue-agile) [![](https://img.shields.io/badge/buy%20me%20a%20coffee-+3€-red.svg?style=flat-square&logo=ko-fi)](http://ko-fi.com/lukaszflorczak)
44

@@ -14,60 +14,53 @@ More demos and examples coming soon in [vue-agile CodePens collection](https://c
1414

1515
If you like the component remember to **star it** ⭐️. If you appreciate my work you can also **[buy me a coffee](https://ko-fi.com/lukaszflorczak)** ☕️ 😉
1616

17-
![](https://muuteam.com/vue-agile.png)
18-
1917
---
2018

2119
🔭 If you're looking for Vue 2 version, check **[legacy/vue-v2](https://github.com/lukaszflorczak/vue-agile/tree/legacy/vue-v2)** branch.
2220

23-
---
24-
25-
## Important – update from version `1.0.x`
26-
27-
#### Events
28-
* `afterChange` => `after-change`
29-
* `beforeChange` => `before-change`
30-
31-
#### Deprecated
32-
Deprecated props (`arrows`, `prevArrow`, `nextArrow`, `show`) and classes (`.agile__arrow`, `.agile__arrow--prev`, `.agile__arrow--next`, `.agile__slide--cloned`) from versions < `1.0` are no longer available
21+
![](https://florczak.dev/vue-agile/banner.png)
3322

3423
## Installation
3524

3625
```bash
3726
npm install vue-agile
3827
```
3928

40-
or
29+
or
4130

4231
```bash
4332
yarn add vue-agile
4433
```
4534

4635
## Styles
4736

48-
**The component is delivered without styles for the appearance of the navigation elements** (like dots color and shape, arrows position, etc.). I think most people use their own styles and default styles are completely redundant. If you want, feel free to use styles from [CodePen demos](https://codepen.io/collection/AdRzJW/).
37+
**The component is delivered without styles for the appearance of the navigation elements** (like dots color and shape, arrows position, etc.). I think most people use their own styles and default styles are completely redundant. If you
38+
want, feel free to use styles from [CodePen demos](https://codepen.io/collection/AdRzJW/).
4939

5040
## Importing
5141

5242
#### Global
5343

5444
```js
5545
// main.js
56-
import Vue from 'vue'
46+
import { createApp } from 'vue'
47+
import App from './App.vue'
5748
import VueAgile from 'vue-agile'
5849

59-
Vue.use(VueAgile)
50+
createApp(App)
51+
.use(VueAgile)
6052
```
6153

6254
#### In component
55+
6356
```js
6457
// YourComponent.vue
6558
import { VueAgile } from 'vue-agile'
6659

67-
export default {
68-
components: {
69-
agile: VueAgile
70-
}
60+
export default {
61+
components: {
62+
agile: VueAgile
63+
}
7164
}
7265
```
7366

@@ -82,23 +75,24 @@ export default {
8275

8376
```vue
8477
<template>
85-
<agile>
86-
<div class="slide">
87-
<h3>slide 1</h3>
88-
</div>
89-
90-
...
91-
92-
<div class="slide">
93-
<h3>slide n</h3>
94-
</div>
95-
</agile>
78+
<agile>
79+
<div class="slide">
80+
<h3>slide 1</h3>
81+
</div>
82+
83+
...
84+
85+
<div class="slide">
86+
<h3>slide n</h3>
87+
</div>
88+
</agile>
9689
</template>
9790
```
9891

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

10194
## Options / Props
95+
10296
| Parameter | Type | Default | Description |
10397
| --- | :---: | :---: | --- |
10498
| [asNavFor](#asNavFor) | array | `[]` | Set the carousel to be the navigation of other carousels |
@@ -168,9 +162,10 @@ Every first-level child of `<agile>` is a new slide. You also can group them ins
168162
```
169163

170164
```js
171-
showCurrentSlide (event) {
172-
console.log(event)
173-
// Shows for example: { currentSlide: 1 }
165+
showCurrentSlide(event)
166+
{
167+
console.log(event)
168+
// Shows for example: { currentSlide: 1 }
174169
}
175170
```
176171

@@ -185,34 +180,35 @@ To customize responsiveness, I recommend defining your desired breakpoints and p
185180
```
186181

187182
```js
188-
data () {
189-
return {
190-
myOptions: {
191-
navButtons: false,
192-
193-
responsive: [
194-
{
195-
breakpoint: 600,
196-
settings: {
197-
dots: false
198-
}
199-
},
200-
201-
{
202-
breakpoint: 900,
203-
settings: {
204-
navButtons: true,
205-
dots: true,
206-
infinite: false
207-
}
208-
}
209-
]
183+
data()
184+
{
185+
return {
186+
myOptions: {
187+
navButtons: false,
188+
responsive: [
189+
{
190+
breakpoint: 600,
191+
settings: {
192+
dots: false
193+
}
194+
},
195+
196+
{
197+
breakpoint: 900,
198+
settings: {
199+
navButtons: true,
200+
dots: true,
201+
infinite: false
202+
}
210203
}
204+
]
211205
}
206+
}
212207
}
213208
```
214209

215-
How does it work? Mobile first mode is used by default. It means, that `navButtons: false` option will be used on screens from 0 to 600 px width (+ all default carousel options). On screens from 600 to 900 px `dots: false` will be added to options from breakpoint before. And on screens over 900 px width `navButtons` and `dots` options will be overwritten and `infinite: false` will be added.
210+
How does it work? Mobile first mode is used by default. It means, that `navButtons: false` option will be used on screens from 0 to 600 px width (+ all default carousel options). On screens from 600 to 900 px `dots: false` will be
211+
added to options from breakpoint before. And on screens over 900 px width `navButtons` and `dots` options will be overwritten and `infinite: false` will be added.
216212

217213
## Custom arrows / nav buttons
218214

@@ -222,10 +218,10 @@ From version `1.0` the component use slots for custom navigation buttons. It mea
222218

223219
```vue
224220
<agile>
225-
... <!-- slides -->
226-
227-
<template slot="prevButton">prev</template>
228-
<template slot="nextButton">next</template>
221+
... <!-- slides -->
222+
223+
<template slot="prevButton">prev</template>
224+
<template slot="nextButton">next</template>
229225
</agile>
230226
```
231227

@@ -237,30 +233,30 @@ To display a static caption or such like within the gallery, you can use the `ca
237233

238234
```vue
239235
<agile @after-change="e => currentSlide = e.currentSlide">
240-
... <!-- slides -->
241-
242-
<template slot="caption">{{ captions[currentSlide] }}</template>
236+
... <!-- slides -->
237+
238+
<template slot="caption">{{ captions[currentSlide] }}</template>
243239
</agile>
244240
245241
<script>
246-
export default {
242+
export default {
247243
data () {
248-
return {
249-
currentSlide: 0,
250-
captions: [
251-
'This is slide 1',
252-
'This is the second slide',
253-
'This is a third and final slide',
254-
]
255-
}
244+
return {
245+
currentSlide: 0,
246+
captions: [
247+
'This is slide 1',
248+
'This is the second slide',
249+
'This is a third and final slide',
250+
]
251+
}
256252
}
257-
}
253+
}
258254
</script>
259255
```
260256

261257
## asNavFor
262258

263-
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.
259+
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.
264260

265261
#### Example
266262

@@ -274,11 +270,12 @@ This option is useful for example for creating a photo gallery with two related
274270

275271
## `v-if` & `v-show`
276272

277-
If you have slides being dynamically loaded, use `v-if` to show the carousel after the slides are ready. Using `v-if` is also recommended in other situations if you want to hide/show the slideshow.
273+
If you have slides being dynamically loaded, use `v-if` to show the carousel after the slides are ready. Using `v-if` is also recommended in other situations if you want to hide/show the slideshow.
278274

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

281277
#### Example
278+
282279
```vue
283280
<button @click="isActive = !isActive">Toggle carousel</button>
284281
@@ -288,7 +285,7 @@ It is also possible to use `v-show`, but you have to use the `reload()` method.
288285
## Nuxt.js && SSR Support
289286

290287
The component uses browser specific attributes (like `window` and `document`). However, you can try to render the first view on server side.
291-
288+
292289
#### Example
293290

294291
```js
@@ -304,61 +301,62 @@ Vue.use(VueAgile)
304301
// nuxt.config.js
305302

306303
export default {
307-
plugins: ['~/plugins/vue-agile'],
304+
plugins: ['~/plugins/vue-agile'],
308305

309-
build: {
310-
transpile: ['vue-agile']
311-
}
306+
build: {
307+
transpile: ['vue-agile']
308+
}
312309
}
313310
```
314311

315312
To use component without SSR use the `client-only` component:
316313

317314
```vue
318315
<client-only placeholder="Loading...">
319-
<agile>...</agile>
316+
<agile>...</agile>
320317
</client-only>
321318
```
322319

323-
**Important!** Component rendered on server side has additional CSS class: `agile--ssr`, so you can use it to add some additional styles or manipulations. For example, I have limited options for setting the first appearance of the slides. By default, the server renders the view and styles, where only the first slide is visible.
320+
**Important!** Component rendered on server side has additional CSS class: `agile--ssr`, so you can use it to add some additional styles or manipulations. For example, I have limited options for setting the first appearance of the slides.
321+
By default, the server renders the view and styles, where only the first slide is visible.
324322

325323
```css
326324
.agile--ssr .agile__slides > * {
327-
overflow: hidden;
328-
width: 0
325+
overflow: hidden;
326+
width: 0
329327
}
330328

331329
.agile--ssr .agile__slides > *:first-child {
332-
width: 100%
330+
width: 100%
333331
}
334332
```
335333

336-
At this stage slides don't have `agile__slide` class yet, so I use `> *` instead of this.
334+
At this stage slides don't have `agile__slide` class yet, so I use `> *` instead of this.
337335

338-
If you would like to connect this with params `slidesToShow` or `initialSlide` you have to add some custom styles with `nth-child` param.
336+
If you would like to connect this with params `slidesToShow` or `initialSlide` you have to add some custom styles with `nth-child` param.
339337

340338
#### Example for `:slidesToShow="2"`
341339

342340
```sass
343-
.agile--ssr
344-
.agile__slides
345-
> *:nth-child(1),
346-
> *:nth-child(2)
347-
width: 50%
341+
.agile--ssr
342+
.agile__slides
343+
> *:nth-child(1),
344+
> *:nth-child(2)
345+
width: 50%
348346
```
349347

350348
#### Example for `:initialSlide="1"`
351349

352350
(Slides index starts at `0`)
353351

354352
```sass
355-
.agile--ssr
356-
.agile__slides
357-
> *:nth-child(1)
358-
width: 0
353+
.agile--ssr
354+
.agile__slides
355+
> *:nth-child(1)
356+
width: 0
359357
360-
> *:nth-child(2)
361-
width: 100%
358+
> *:nth-child(2)
359+
width: 100%
362360
```
363361

364362
You can also check [nuxt-agile](https://github.com/lukaszflorczak/nuxt-agile) repository and check working demo of vue-agile with Nuxt and SSR.

0 commit comments

Comments
 (0)