Vue Flux

Image slider which comes with 20 cool transitions
Alternatives To Vue Flux
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Keen Slider4,27267a month ago104July 05, 202385mitTypeScript
The HTML touch slider carousel with the most native feeling you will get.
Splide3,821627 months ago150November 09, 202244mitTypeScript
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
Embla Carousel3,7531707 days ago95November 28, 202316mitTypeScript — A lightweight carousel library with fluid motion and great swipe precision.
Vue Ydui2,754108155 years ago128August 20, 2018189mitVue
A mobile components Library with Vue2.js. 一只基于Vue2.x的移动端组件库。
Egjs Flicking2,5403165 days ago120November 17, 202344mitTypeScript
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
Vue Slider Component2,292394293a year ago210December 14, 202224mitTypeScript
🌡 A highly customized slider component
Front End Plugins944
3 years agoJavaScript
:whale2: Web 前端常用插件
Vue Concise Slider9193510a year ago61February 18, 202244Vue
vue-concise-slider,A simple vue sliding component
Vue Swipe916210174 years ago22April 18, 201842Vue
A touch slider for vue.js.
Vue Slick Carousel73327a year ago18July 05, 2020153otherVue
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Alternatives To Vue Flux
Select To Compare

Alternative Project Comparisons

Documentation and demos

Version 5 documentation

Version 6 documentation

Version 6 demos


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

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


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

Add the component to the template. This one has all the complements, so you can remove the ones you don't want.


   <template v-slot:preloader>
      <flux-preloader />

   <template v-slot:caption>
      <flux-caption />

   <template v-slot:controls>
      <flux-controls />

   <template v-slot:pagination>
      <flux-pagination />

   <template v-slot:index>
      <flux-index />

<button @click="$'next')">NEXT</button>

Add it to the component, and like before you can remove the complements you don't use.

import {
} from 'vue-flux';

export default {
   components: {

   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',


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.

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 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.
  • 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 splited 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.


As simple as this.

<flux-parallax src="url" style="height: 300px;">


If you find yourself running into issues during installation or running the slider, please check our documentation. If still needs help open an issue. We would 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.

Popular Slider Projects
Popular Vue Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.