Socket
Socket
Sign inDemoInstall

vue-flux

Package Overview
Dependencies
21
Maintainers
1
Versions
118
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-flux

Vue image and other resources slider


Version published
Maintainers
1
Weekly downloads
243
decreased by-27.25%

Weekly downloads

Readme

Source

Documentation and demos

Version 5 documentation

Version 6 documentation

Version 7 documentation

Version 7 demos

Overview

This is an image slider developed with vue 3 which comes with 20 cool transitions out of the box.

npm npm npm bundle size (minified) npm bundle size (minified + gzip) GitHub issues GitHub

Features

FeatureDescription
ResponsiveThe slider and the images are adapted to container to fill it always
CompatibilitySupported by all major browsers
ExpandableYou can add your custom transitions very easily
CustomizationTotal customizable to suit most needs
GesturesMobile friendly by gestures
FunctionalityYou can use arrow keys to navigate. Switch to full screen
ParallaxIt includes a parallax component very easy to set up

Quick start

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>

Performance

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.

Included transitions

2D transitions
  • Fade: fades from one image to next.
  • Kenburn: fades, zoom and moves current image to next.
  • Swipe: swipes the image to display next like uncovered with a curtain.
  • Slide: slides the image horizontally revealing the next.
  • Waterfall: divides the image in bars and drops them down in turns.
  • Zip: divides the image in bars and slides them up and down alternately like a zip.
  • Blinds 2D: divides the image in vertical bars that blinds and fades out.
  • 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.
  • Warp: a concentric effect is performed by rotating the image converted into circles in alternate direction.
  • Camera: from outside to inside the image is being circled in black like a camera.
3D transitions
  • Cube: turns the image to a side like if place in a cube.
  • Book: makes the effect of turning a page to display next image.
  • Fall: the image falls in front displaying next image.
  • Wave: makes the image 3D and divides it in slices that turn vertically to display the next image.
  • Blinds 3D: divides the image in vertical bars that blinds 180 deg to form the 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.
  • Explode: the image starts to explode from the center to outside.

Parallax

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>

Troubleshooting

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.

Documentation

You can view the full documentation at the project's documentation with examples and detailed information.

Changelog

Check the changelog for update info.

Inspiration

This slider was inspired by Flux Slider.

Contributing

Contributions, questions and comments are all welcome and encouraged.

Do not hesitate to send me your own transitions to add them to the slider.

Keywords

FAQs

Last updated on 18 Dec 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc