Vuejs-Vue flux: vue-flux - Image slider which comes with 20 cool transitions.

Documentation and demos

Version 5 documentation

Version 6 documentation

Version 6 demos

Overview

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

Features

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

Quickstart

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.

<vue-flux
   :options="vfOptions"
   :images="vfImages"
   :transitions="vfTransitions"
   :captions="vfCaptions"
   ref="slider">

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

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

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

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

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

<button @click="$refs.slider.show('next')">NEXT</button>

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

import {
   VueFlux,
   FluxCaption,
   FluxControls,
   FluxIndex,
   FluxPagination,
   FluxPreloader,
} from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxCaption,
      FluxControls,
      FluxIndex,
      FluxPagination,
      FluxPreloader,
   },

   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',
      ],
   }),
}

Performance

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.

Parallax

As simple as this.

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

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. We would 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.

Comments

  • how to add video ?
    how to add video ?

    Apr 10, 2019

    Hi , I want to rotate the video and picture how can I do it ? Is the video plug-in easy ?

    enhancement question 
    Reply
  • is there any way to use these awesome transitions on non-images?
    is there any way to use these awesome transitions on non-images?

    May 20, 2020

    love love the transitions in your package.. they're the best i've found on Github.. I'd love to be able to apply them on div content? Is there any way to achieve that? Maybe the only way would be to cheat and create an image with the div content dynamically and then apply the transitions to those?

    Would love to hear of any tricks to make this possible

    Thanks!

    enhancement question 
    Reply
  • Some transitions are not working properly with css resizing
    Some transitions are not working properly with css resizing

    Aug 2, 2020

    Hello, I am trying to implement this gallery as banner, and I need to make sure all images are stretched in the container. To be able to resize the gallery I am using:

    .vue-flux {
      height: 100%;
      width: 100%;
    }
    

    After I apply this CSS there is a problem with some of the animations/transitions. I get this console error:

    [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'forEach' of undefined"
    
    
    found in
    
    
    ---> <FluxTransition>
    
           <VueFlux>
    
             <GalleryOne> at /src/components/GalleryOne.vue
    
               <App> at /src/App.vue
    
                 <Root>
    

    Can you please confirm if this is the right way to resize the gallery?

    Full working example:

    1. My test case https://codesandbox.io/s/staging-snow-94uyg?file=/src/App.vue
    2. Only preview https://94uyg.csb.app/

    Thank you for your time!

    bug 
    Reply
  • Problems handling different image sizes and aspect ratios
    Problems handling different image sizes and aspect ratios

    Sep 11, 2020

    Hey there,

    we are using vue-flux in a light box (fullscreen) and have user input images. So we can't ensure images are big enough to fill the whole space or have a certain aspect ratio. Both images can be in the same list.

    Right now the small pictures are stretched to fit the space and also widescreen images are overflowing the view.

    Is there a way to not stretch small images, but down scale large images to fit in the screen?

    enhancement question 
    Reply
  • Part of images are cut according to slider component size
    Part of images are cut according to slider component size

    Nov 13, 2020

    Hello I have several slider images with same size. But images are cut according to its browser size.(that means slider component size is change) Is that possible if i set vue-flux component fit for image size? One option to force stretch images fit for vue-flux component size so that will not cut some part of images. Hopefully that can be resolved quickly.

    question 
    Reply
  • app.js:31611 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
    app.js:31611 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined

    Feb 15, 2021

    i tem

    `` 7.0 
    Reply
  • Vue3 support
    Vue3 support

    Aug 30, 2021

    Will there be Vue3 support anytime soon?

    question 
    Reply
  • How do I use local image files rather than image URLs?
    How do I use local image files rather than image URLs?

    May 18, 2020

    I'm using the quick-start code to learn about VueFlux VueFlux Overview but I'm falling down on using local image assets rather than a link to an URL.

    This is my vue-flux:

        <vue-flux ref="slider"
          :options="vfOptions"
          :images="vfImages"
          :transitions="vfTransitions"
          :captions="vfCaptions"
        >
    

    and the documentation has this syntax for the images array:

    vfImages: [ 'URL1', 'URL2', 'URL3' ],

    So something like this works great::

    vfImages: [
    "https://upload.wikimedia.org/wikipedia/commons/8/82/OrlandoNightSkyline.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Lake_Eola_Park_in_Orlando_01.jpg/1200px-Lake_Eola_Park_in_Orlando_01.jpg"
          ],
    

    but I cannot for the life of me get any permutation of file paths to local images to work, such as:

    vfImages: [
    "@/assets/image/property/bathroom1.jpg",
    "../assets/image/property/bathroom1.jpg"
    ],
    

    Is it meant to work with local image files or am I missing something?

    Regards,

    Mark

    question 
    Reply
  • How do I use this great app with nuxtjs
    How do I use this great app with nuxtjs

    Sep 14, 2018

    Please is there a way to use VueFlux with nuxtjs I am getting nuxt error : window/document undefined?

    help wanted question 
    Reply
  • Vue is not defined
    Vue is not defined

    Aug 4, 2018

    my main.js `import Vue from 'vue' import App from './App' import router from './router'

    window.Vue = require('vue')

    Vue.config.productionTip = false

    /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })`

    error: Uncaught ReferenceError: Vue is not defined

    component: `import { VueFlux, Transitions } from 'vue-flux' // import './node_modules/vue-flux/dist/vue-flux.css';

    export default { components: { 'vue-flux': VueFlux },

    data: () => ({ fluxOptions: { autoplay: true }, fluxImages: [ 'https://source.unsplash.com/random', 'https://source.unsplash.com/random', 'https://source.unsplash.com/random' ], fluxTransitions: { transitionTurn3d: Transitions.transitionTurn3d } }) }`

    working in vue cli 3

    Reply
  • Cant update delay or transitions
    Cant update delay or transitions

    Aug 13, 2018

    Hi,

    very good vue component that saved me a lot of time but now i have some little problems.

    I update the delay or transition of the fluxOptions Object or the fluxTransitions Object but the changes would not be recognized by the vue-flux component.

    For example i add a button that changes the delay from 5000 to 10000 but the delay didnt changed.

    Regards, NMonst4

    enhancement 
    Reply
  • Programatically enter full screen mode
    Programatically enter full screen mode

    Mar 18, 2020

    Hi,

    I am trying to create a button that, when clicked, changes the VueFlux to full screen mode (instead of the default double click).

    I am trying to do it (after the component has been mounted) using $refs and calling the enterFullScreen() method (defined in the DisplayController class) like this:

    this.$refs.slider.Display.enterFullScreen()

    but it fires an error in the console:

    TypeError: Fullscreen request denied

    Does anyone know how can i access this method using $refs? Or is there any other way of doing it?

    Maybe a prop that could be changed from the parent component would be a great feature?

    Thank you.

    enhancement question 
    Reply
  • Jump the screen before or after a transition
    Jump the screen before or after a transition

    Jan 7, 2022

    Hey, during the tests, I noticed quite ugly slider behavior on mobile devices (I have not noticed the problem on the computer.).

    While the slider plays and moves on to the next one, sometimes the screen moves to strange places, e.g. in front of the slider or behind the slider. I am attaching a video to show the problem.

    Perhaps someone knows what this could be caused by?

    https://user-images.githubusercontent.com/6283074/148550311-8885c411-6b03-4454-be9c-88511e64e38b.mp4

    question 
    Reply
  • components are not displaying
    components are not displaying

    Sep 24, 2018

    FluxCaption, FluxControls, FluxIndex, FluxPagination are not working. Am i using it correctly?

    component.txt.txt

    bug 
    Reply
  • Too large height?
    Too large height?

    Oct 17, 2018

    i can use style='height:600px' but it remove mobile responsive too less. It don't obey the the wrapping container height (For large width it don't obey).

    How can i make it good on large screen display.

    It don't obey max-height also :(

    Reply
  • Fix for custom transitions not properly loaded
    Fix for custom transitions not properly loaded

    Sep 3, 2019

    Hi,

    I noticed custom transitions are not properly loaded :

    https://github.com/deulos/vue-flux/blob/0096716c9cb46300938d4d78f0857842f2db366c/src/components/FluxTransition.vue#L76-L79

    should probably return this.transition.component.

    A few comments : I took a look at the code and really like the clean and clever architecture fully using Vue transitions power, custom transitions are super easy to make. Did you consider passing the full images array as prop to the transition component? It could open some space for fun advanced effects.

    Also the first custom transitions I'm doing are "back" versions of default transitions such as slide or swipe. If it's not too much work I really support the come back of the direction feature in v6 because some effects feel really weird when the same direction is used for next and previous slides.

    Last thing I can't seem to import BaseTransition from the dist folder in my custom transitions, is there a way to do so? I had to copy it. On a related note when installed with npm the src folder isn't present, only dist, is this a choice ?

    bug enhancement 6.0.0 
    Reply
  • Ideas for new version :)
    Ideas for new version :)

    Nov 7, 2018

    Hello, I'm gathering new ideas for future releases, feel free to contribute to make this component better :)

    • Add image filters
    enhancement 6.0.0 
    Reply