Press "Enter" to skip to content

Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box.

vue slide transition, vue carousel transition, vue router transition slide, image slider transition effects css, responsive image slider with text, responsive automatic image slider

Responsive Image Slider Show With Counter And Description Text Library

Included transitions

2D transitions

  • Fade: Fades from one image to another.
  • Kenburn: fades in, enlarges and moves the current image to the next.
  • Swipe: Scrolls the image to view it later as if it were exposed by a curtain.
  • Slide: Slides the image horizontally to reveal the next image.
  • Waterfall: Divides the image into bars and drops them alternately.
  • Zip: splits the image into bars and scrolls them up and down alternately like a zip.
  • Blinds 2D: Splits the image into vertical bands that blur and fade.
  • Squares 1: The image is divided into blocks that shrink and fade randomly.
  • Squares 2: The image is divided into blocks that shrink and fade in a wave from one corner to another.
  • Concentric: The concentric effect is performed by rotating the converted image into circles.
  • Convolution: A central effect is performed by rotating the converted image into circles in an alternate direction.
  • Camera: The image from outside to inside is circled black like a camera.

3D transitions

  • Cube: Shifts the image to a side like placing it in a cube.
  • Book: Makes a page flip effect to display the next image.
  • Fall: The image falls to the foreground and displays the next image.
  • Wave: Makes a 3D image and splits it into slices that rotate vertically to display the next image.
  • 3D Blinds: Splits the image into vertical bars that darken 180 degrees to form the next image.
  • Round 1: The image is divided into blocks that rotate 180 degrees horizontally to form the next image.
  • Round 2: The panels begin rotating vertically to reveal the next image in the shape of the top arrow, leaving the aisle.
  • Explodes: The image begins to explode from the center outwards.

How to make use of it:

Install and download:

# NPM
$ npm install vue-flux --save

Add the component to the template.

<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 ingredient, and as before you can remove the supplement you are not using.

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

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

Image Slider With 17 Cool Transitions, vue-flux Plugin/Github, 3d animated slider


See Demo And Download

Official Website(ragnarlotus): Click Here

This superior jQuery/javascript plugin is developed by ragnarlotus. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *