Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://ragnarlotus.github.io/vue-flux-docs/documentation/v6/overview below:

Overview | VueFlux

This is an image slider developed with vue open in new window 2 which comes with 20 cool transitions out of the box.

You can view some demos here (WIP).

Install and save the package.

npm install --save vue-flux@stable

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

Weight is about 130 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.

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

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

As simple as this.

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

If you find yourself running into issues during installation or running the slider, please check our documentation open in new window. If still needs help open an issue open in new window. We would be happy to discuss how they can be solved.

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

Check the changelog open in new window for update info.

This slider was inspired by Flux Slider open in new window.

Contributions, questions and comments are all welcome and encouraged.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4