All Projects → ragnarlotus → Vue Flux

ragnarlotus / Vue Flux

Licence: mit
Image slider which comes with 20 cool transitions

Projects that are alternatives of or similar to Vue Flux

React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-91.92%)
Mutual labels:  image, slider
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+98.61%)
Mutual labels:  image, slider
Vue Parallax
🌌 Vue.js component for parallax image scroll effects
Stars: ✭ 569 (+58.5%)
Mutual labels:  image, parallax
Simpleparallax.js
Simple and tiny JavaScript library that adds parallax animations on any images
Stars: ✭ 1,075 (+199.44%)
Mutual labels:  image, parallax
Tifig
A fast HEIF image converter aimed at thumbnailing
Stars: ✭ 345 (-3.9%)
Mutual labels:  image
Maxurl
Finds larger/original versions of images and videos
Stars: ✭ 332 (-7.52%)
Mutual labels:  image
Laravel Glide
Easily convert images with Glide
Stars: ✭ 333 (-7.24%)
Mutual labels:  image
Npm Gif
Replace NPM install's progress bar with a GIF!
Stars: ✭ 332 (-7.52%)
Mutual labels:  image
Imaginary
Fast, simple, scalable, Docker-ready HTTP microservice for high-level image processing
Stars: ✭ 4,107 (+1044.01%)
Mutual labels:  image
Bulletproof
PHP secure Image uploader, with a nice API
Stars: ✭ 352 (-1.95%)
Mutual labels:  image
Blind Watermark
Watermark added to the frequency domain by Fourier transform
Stars: ✭ 344 (-4.18%)
Mutual labels:  image
Sectionedslider
iOS 11 Control Center Slider
Stars: ✭ 336 (-6.41%)
Mutual labels:  slider
Tv
Quickly view (satellite) imagery directly in your terminal using Unicode 9.0 characters and true color.
Stars: ✭ 347 (-3.34%)
Mutual labels:  image
Vue Lazy Image Loading
Vue lazy image and background loading plugin.
Stars: ✭ 335 (-6.69%)
Mutual labels:  image
Node Html To Image
A Node.js module that generates images from HTML
Stars: ✭ 351 (-2.23%)
Mutual labels:  image
Fancyscrollview
A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)
Stars: ✭ 330 (-8.08%)
Mutual labels:  parallax
Mango
mango fun framework
Stars: ✭ 343 (-4.46%)
Mutual labels:  image
File Upload With Preview
🖼 A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: ✭ 352 (-1.95%)
Mutual labels:  image
Tkimageview
An easy way to crop an image.
Stars: ✭ 342 (-4.74%)
Mutual labels:  image
Transformer page view
PageTransformer for flutter
Stars: ✭ 341 (-5.01%)
Mutual labels:  parallax

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].