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

Commit 98b4f10

Browse files
Edited some of the verbiage on the readme to read more natively.
1 parent 23eae38 commit 98b4f10

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
# vue-agile
22

3-
> Carousel component for Vue.js inspired by [Slick](https://github.com/kenwheeler/slick/).<br>
4-
> More powerful with each version, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).
3+
> A carousel component for Vue.js inspired by [Slick](https://github.com/kenwheeler/slick/).<br>
4+
> Powerful, touch-friendly, and written in Vue and Vanilla JS (without a jQuery dependency).
55
66
**[Demo & examples](https://lukaszflorczak.github.io/vue-agile/)**
77

88
🤝 Thanks to [Maciej Wach](https://github.com/wachu91) for inventing the name, testing and motivation.
99

1010
---
1111

12-
**Please note that the plugin is currently in relatively early development phase. I try to keep the stability of each version and keep up with all issues, but unfortunately at this stage there may still be some bugs.**
12+
**Please note that the plugin is currently in a relatively early development phase. I will try to keep up with all issues and maintain stability with each version, but unfortunately at this stage there may still be some bugs.**
1313

1414
---
1515

1616
## Important – update from version < `0.3`
1717

18-
**In version `0.3.0`, I removed all styles that are responsible for the appearance of 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 to check out these defaults styles, you can find them [here](https://github.com/lukaszflorczak/vue-agile/blob/master/src/Agile.vue#L488).
18+
**In version `0.3.0`, I removed all styles that are responsible 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 to check out these defaults styles, you can find them [here](https://github.com/lukaszflorczak/vue-agile/blob/master/src/Agile.vue#L488).
1919

20-
**Additionally dots and arrows have been moved from the `.agile__list` to the main `.agile` container.** The layout is the same as in Slick and id should allow for better and more comfortable positioning of these elements.
20+
**Additionally dots and arrows have been moved from the `.agile__list` to the main `.agile` container.** The layout is the same as in Slick and should allow for and easier time positioning these elements.
2121

2222
## Installation
2323

@@ -88,7 +88,7 @@ Every first-level child of `<agile>` is a new slide.
8888

8989
## Responsive
9090

91-
To customize responsiveness, I recommend defining desired breakpoint and passing a settings object with the options to modify inside **options**.
91+
To customize responsiveness, I recommend defining your desired breakpoints and passing a settings object with your modification options inside **options**.
9292

9393
### Example
9494

@@ -128,12 +128,12 @@ data () {
128128

129129
## Arrows
130130

131-
By default carousel contains SVG arrows. You can change them using CSS or `prevArrow` & `nextArrow` parameters.
131+
By default a carousel contains SVG arrows. You can change them by using CSS or with the `prevArrow` & `nextArrow` parameters.
132132

133133
There are two important things:
134134

135-
1. You should put your SVG/HTML code in one line, without new line chars etc.
136-
2. You should define arrows code as variables in `data()`.
135+
1. Your SVG/HTML code should all be one line (no linebreaks, line chars, etc.)
136+
2. You should define each of your arrows' code as variables within `data()`.
137137

138138
### Example
139139

@@ -148,16 +148,16 @@ export default {
148148
data () {
149149
return {
150150
left: '<svg x="0px" y="0px" viewBox="0 0 24 24"><path d="M16.2,21c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L9.6,12L17,4.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L6.8,12l8.8,8.7C15.7,20.9,16,21,16.2,21z"/></svg>',
151-
right: '<svg x="0px" y="0px" viewBox="0 0 24 24"><path d="M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z"/></svg>'
151+
right: '<svg x="0px" y="0px" viewBox="0 0 24 24"><path d="M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4 1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z"/></svg>'
152152
}
153153
}
154154
}
155155
```
156156
## `v-if` & `v-show`
157157

158-
If you have dynamically loaded slides, use `v-if` to show carousel when slides will be ready. Using `v-if` is also recommended in other situations if you want to hide/show the slideshow.
158+
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.
159159

160-
If for some reason you need to use `v-show`, it's also possible, but you have to use an additional parameter `show` with the same value as for the `v-show`.
160+
It is also possible to use `v-show`, but you have to use the additional parameter `show` with the same value as what's in `v-show`.
161161

162162
### Example
163163
``` html
@@ -176,7 +176,7 @@ toggleAgile () {
176176

177177
## SSR Support
178178

179-
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.
179+
The component uses browser specific attributes (like `window` and `document`). Unfortunately, it is necessary -- so as of now, the only option is to run vue-agile solely 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.
180180

181181
### Example
182182
```js

0 commit comments

Comments
 (0)