Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-flux
Advanced tools
Readme
This is an image slider developed with vue 3 which comes with 20 cool transitions out of the box.
Feature | Description |
---|---|
Responsive | The slider and the images are adapted to container to fill it always |
Compatibility | Supported by all major browsers |
Expandable | You can add your custom transitions very easily |
Customization | Total customizable to suit most needs |
Gestures | Mobile friendly by gestures |
Functionality | You can use arrow keys to navigate. Switch to full screen |
Parallax | It includes a parallax component very easy to set up |
Install and save the package.
npm install --save vue-flux@latest
Add component. This one has all the complements, so you can remove the ones you don't want.
<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';
const $vueFlux = ref();
const vfOptions = shallowReactive({
autoplay: true,
});
const vfRscs = shallowReactive([
new Img('URL1' 'img 1'),
new Img('URL2' 'img 2'),
new Img('URL3' 'img 3'),
]);
const vfTransitions = shallowReactive([Book, Zip]);
</script>
<template>
<VueFlux
:options="vfOptions"
:rscs="vfRscs"
:transitions="vfTransitions"
ref="$vueFlux">
<template #preloader="preloaderProps">
<FluxPreloader v-bind="preloaderProps" />
</template>
<template #caption="captionProps">
<FluxCaption v-bind="captionProps" />
</template>
<template #controls="controlsProps">
<FluxControls v-bind="controlsProps" />
</template>
<template #pagination="paginationProps">
<FluxPagination v-bind="paginationProps" />
</template>
<template #index="indexProps">
<FluxIndex v-bind="indexProps" />
</template>
</VueFlux>
<button @click="$vueFlux.show('next')">NEXT</button>
</template>
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.
As simple as this.
<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>
If you find yourself running into issues during installation or running the slider, please check our documentation. If still needs help open an issue. I will be happy to discuss how they can be solved.
You can view the full documentation at the project's documentation with examples and detailed information.
Check the changelog for update info.
This slider was inspired by Flux Slider.
Contributions, questions and comments are all welcome and encouraged.
Do not hesitate to send me your own transitions to add them to the slider.
FAQs
Vue image and other resources slider
The npm package vue-flux receives a total of 386 weekly downloads. As such, vue-flux popularity was classified as not popular.
We found that vue-flux demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.