VueFlux
Home
  • v5
  • v6
  • v7
Demos
GitHub
Home
  • v5
  • v6
  • v7
Demos
GitHub
  • Overview
  • Changelog
  • Installation and usage
  • Templating
  • SSR with Nuxt
  • Components
    • VueFlux
    • FluxParallax
    • FluxCaption
    • FluxControls
    • FluxIndex
    • FluxPagination
    • FluxImage
    • FluxWrapper
    • FluxCube
    • FluxGrid
    • FluxVortex
    • FluxThumb
  • Transitions
    • Blinds 2D
    • Blinds 3D
    • Blocks 1
    • Blocks 2
    • Book
    • Camera
    • Concentric
    • Cube
    • Explode
    • Fade
    • Fall
    • Kenburn
    • Round 1
    • Round 2
    • Slide
    • Swipe
    • Warp
    • Waterfall
    • Wave
    • Zip
  • Custom transitions

Installation

Installation is very simple, just use your favorite package manager:

npm install --save vue-flux@previous

Usage

In your code just add the component in the template.

<vue-flux
   :options="fluxOptions"
   :images="fluxImages"
   :transitions="fluxTransitions"
   ref="slider">
      <flux-pagination slot="pagination"></flux-pagination>
</vue-flux>

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

And the data that will be used in the template.

import { VueFlux, FluxPagination, Transitions } from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxPagination
   },

   data: () => ({
      fluxOptions: {
         autoplay: true
      },
      fluxImages: [
         'URL1',
         'URL2',
         'URL3'
      ],
      fluxTransitions: {
         transitionBook: Transitions.transitionBook
      }
   })
}

If you want to see more details about configuration check the VueFlux component documentation.

Last Updated: 10/24/23, 4:45 PM
Prev
Changelog
Next
Templating