Comparing version
@@ -2004,5 +2004,5 @@ import { AllowedComponentProps } from 'vue'; | ||
}, { | ||
show: (resourceIndex?: number | Direction, transitionIndex?: number | Direction) => Promise<void>; | ||
play: (resourceIndex?: number | Direction, delay?: number | undefined) => void; | ||
stop: (cancelTransition?: boolean) => void; | ||
show: (resourceIndex: number | Directions | undefined, transitionIndex: number | Directions | undefined) => Promise<void>; | ||
play: (resourceIndex: number | Directions | undefined, delay: number | undefined) => void; | ||
stop: (cancelTransition: boolean | undefined) => void; | ||
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{ | ||
@@ -2009,0 +2009,0 @@ options: { |
{ | ||
"name": "vue-flux", | ||
"type": "module", | ||
"version": "7.0.0-alpha.5", | ||
"version": "7.0.0-alpha.6", | ||
"description": "Vue image slider", | ||
@@ -6,0 +6,0 @@ "author": "ragnar lotus", |
154
README.md
## Documentation and demos | ||
**[Version 5 documentation](https://deulos.github.io/vue-flux-docs/v5/)** | ||
**[Version 5 documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v5/overview)** | ||
**[Version 6 documentation](https://deulos.github.io/vue-flux-docs/v6/)** | ||
**[Version 6 documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v6/overview)** | ||
**[Version 6 demos](https://deulos.github.io/vue-flux-docs/demos/)** | ||
**[Version 7 documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/overview)** | ||
## Overview | ||
**[Version 7 demos](https://ragnarlotus.github.io/vue-flux-docs/demos/demos)** | ||
This is an image slider developed with [Vuejs](https://vuejs.org/) 2 which comes with 20 cool transitions out of the box. | ||
# Overview | ||
This is an image slider developed with [vue](https://vuejs.org/) 3 which comes with 20 cool transitions out of the box. | ||
 | ||
@@ -17,3 +19,3 @@  | ||
 | ||
 | ||
 | ||
 | ||
@@ -33,3 +35,3 @@ | ||
## Quickstart | ||
## Quick start | ||
@@ -39,74 +41,68 @@ Install and save the package. | ||
``` bash | ||
npm install --save vue-flux | ||
npm install --save vue-flux@latest | ||
``` | ||
Add the component to the template. This one has all the complements, so you can remove the ones you don't want. | ||
Add component. This one has all the complements, so you can remove the ones you don't want. | ||
``` html | ||
<vue-flux | ||
:options="vfOptions" | ||
:images="vfImages" | ||
:transitions="vfTransitions" | ||
:captions="vfCaptions" | ||
ref="slider"> | ||
<script setup> | ||
import { ref, shallowReactive } from 'vue'; | ||
import { | ||
VueFlux, | ||
FluxCaption, | ||
FluxControls, | ||
FluxIndex, | ||
FluxPagination, | ||
FluxPreloader, | ||
Img, | ||
Book, | ||
Zip, | ||
} from 'vue-flux'; | ||
import 'vue-flux/style.css'; | ||
<template v-slot:preloader> | ||
<flux-preloader /> | ||
</template> | ||
const $vueFlux = ref(); | ||
<template v-slot:caption> | ||
<flux-caption /> | ||
</template> | ||
const vfOptions = shallowReactive({ | ||
autoplay: true, | ||
}); | ||
<template v-slot:controls> | ||
<flux-controls /> | ||
</template> | ||
const vfRscs = shallowReactive([ | ||
new Img('URL1' 'img 1'), | ||
new Img('URL2' 'img 2'), | ||
new Img('URL3' 'img 3'), | ||
]); | ||
<template v-slot:pagination> | ||
<flux-pagination /> | ||
</template> | ||
const vfTransitions = shallowReactive([Book, Zip]); | ||
</script> | ||
<template v-slot:index> | ||
<flux-index /> | ||
</template> | ||
</vue-flux> | ||
<template> | ||
<VueFlux | ||
:options="vfOptions" | ||
:rscs="vfRscs" | ||
:transitions="vfTransitions" | ||
ref="$vueFlux"> | ||
<button @click="$refs.slider.show('next')">NEXT</button> | ||
``` | ||
<template #preloader="preloaderProps"> | ||
<FluxPreloader v-bind="preloaderProps" /> | ||
</template> | ||
Add it to the component, and like before you can remove the complements you don't use. | ||
<template #caption="captionProps"> | ||
<FluxCaption v-bind="captionProps" /> | ||
</template> | ||
``` javascript | ||
import { | ||
VueFlux, | ||
FluxCaption, | ||
FluxControls, | ||
FluxIndex, | ||
FluxPagination, | ||
FluxPreloader, | ||
} from 'vue-flux'; | ||
<template #controls="controlsProps"> | ||
<FluxControls v-bind="controlsProps" /> | ||
</template> | ||
export default { | ||
components: { | ||
VueFlux, | ||
FluxCaption, | ||
FluxControls, | ||
FluxIndex, | ||
FluxPagination, | ||
FluxPreloader, | ||
}, | ||
<template #pagination="paginationProps"> | ||
<FluxPagination v-bind="paginationProps" /> | ||
</template> | ||
data: () => ({ | ||
vfOptions: { | ||
autoplay: true | ||
}, | ||
vfImages: [ 'URL1', 'URL2', 'URL3' ], | ||
vfTransitions: [ 'fade', 'cube', 'book', 'wave' ], | ||
vfCaptions: [ | ||
'Caption for image 1', | ||
'Caption for image 2', | ||
'Caption for image 3', | ||
], | ||
}), | ||
} | ||
<template #index="indexProps"> | ||
<FluxIndex v-bind="indexProps" /> | ||
</template> | ||
</VueFlux> | ||
<button @click="$vueFlux.show('next')">NEXT</button> | ||
</template> | ||
``` | ||
@@ -116,3 +112,3 @@ | ||
Weight is about 130KB so is pretty light having only the essential CSS. It also does not require a high end computer as animations are performed with CSS3 hardware acceleration. | ||
Weight is about 60 KB so is pretty light having only the essential CSS. It also does not require a high end computer as animations are performed with CSS3 hardware acceleration. | ||
@@ -130,4 +126,4 @@ ## Included transitions | ||
* Blinds 2D: divides the image in vertical bars that blinds and fades out. | ||
* Blocks 1: the image is splited in blocks that shrink and fade out randomly. | ||
* Blocks 2: the image is splited in blocks that shrink and fade out in wave from a corner to the opposite. | ||
* Blocks 1: the image is split in blocks that shrink and fade out randomly. | ||
* Blocks 2: the image is split in blocks that shrink and fade out in wave from a corner to the opposite. | ||
* Concentric: a concentric effect is performed by rotating the image converted into circles. | ||
@@ -144,3 +140,3 @@ * Warp: a concentric effect is performed by rotating the image converted into circles in alternate direction. | ||
* Blinds 3D: divides the image in vertical bars that blinds 180 deg to form the next image. | ||
* Round 1: the image is splited in blocks that turn 180 deg horizontally to form next image. | ||
* Round 1: the image is split in blocks that turn 180 deg horizontally to form next image. | ||
* Round 2: panels start to round vertically revealing the next image in upper arrow form leaving trail. | ||
@@ -154,5 +150,13 @@ * Explode: the image starts to explode from the center to outside. | ||
``` html | ||
<flux-parallax src="url" style="height: 300px;"> | ||
<div>CONTENT</div> | ||
</flux-parallax> | ||
<script setup> | ||
import { FluxParallax, Img } from 'vue-flux'; | ||
const rsc = new Img('URL1' 'img 1'); | ||
</script> | ||
<template> | ||
<FluxParallax :rsc="rsc" style="height: 300px;"> | ||
<div>CONTENT</div> | ||
</FluxParallax> | ||
</template> | ||
``` | ||
@@ -162,11 +166,11 @@ | ||
If you find yourself running into issues during installation or running the slider, please check our [documentation](https://deulos.github.io/vue-flux-docs/v6/). If still needs help open an [issue](https://github.com/deulos/vue-flux/issues/new). We would be happy to discuss how they can be solved. | ||
If you find yourself running into issues during installation or running the slider, please check our [documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/overview). If still needs help open an [issue](https://github.com/ragnarlotus/vue-flux/issues/new). I will be happy to discuss how they can be solved. | ||
## Documentation | ||
You can view the full documentation at the project's [documentation](https://deulos.github.io/vue-flux-docs/v6/) with examples and detailed information. | ||
You can view the full documentation at the project's [documentation](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/overview) with examples and detailed information. | ||
## Changelog | ||
Check the [changelog](https://deulos.github.io/vue-flux-docs/v6/changelog) for update info. | ||
Check the [changelog](https://ragnarlotus.github.io/vue-flux-docs/documentation/v7/changelog) for update info. | ||
@@ -173,0 +177,0 @@ ## Inspiration |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
203805
0.29%178
2.3%