Image slider which comes with 20 cool transitions

Related tags

Slider vue-flux
Overview

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

Demo

You can view a demo here.

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

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

<button @click="$refs.slider.showImage('next')">NEXTbutton>
import { VueFlux, FluxPagination, Transitions } from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxPagination
   },

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

Performance

Weight is just 97KB 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 cropped like in a camera lens.

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

CONTENT
">
<flux-parallax src="slides/1.jpg" height="300px" offset="80%" type="relative">
   <div>CONTENTdiv>
flux-parallax>

Troubleshooting

If you find yourself running into issues during installation or running the slider, please check our Wiki. 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 Wiki 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.

You might also like...
Circle slider component for Vue.js

vue-circle-slider Circle slider component for Vue.js Table of contents Installation Usage Demo TODO intentions Installation npm install --save vue-cir

🎢 A Simple Vue Slider Bar Component.
🎢 A Simple Vue Slider Bar Component.

🎢 Vue Slide Bar A Simple Vue Slider Bar Component. Docs Document & Demo Page Install npm install vue-slide-bar --save or yarn add vue-slide-bar Usage

Range slider with histogram for Vue.js
Range slider with histogram for Vue.js

Range slider with histogram for Vue 🚀 Quick Start If you are a try and learn developer, you can start trying the vue-histogram-slider now using codes

Vue 3 slider component with multihandles, tooltips merging and formatting.
Vue 3 slider component with multihandles, tooltips merging and formatting.

Vue 3 Slider Sponsors Other libraries @vueform/multiselect - Vue 3 multiselect component with single select, multiselect and tagging options. @vueform

Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.
Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.
Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

Simple Vue JS slider for Vue JS that pretty much takes what you throw at it.

vue-concise-slider,A simple vue sliding component
vue-concise-slider,A simple vue sliding component

vue-concise-slider,A simple vue sliding component

A simple website prototype that showcases a live white/black slider.

A quick prototype of having black-white slider over website content.

A simple vue-range slider, that supports custom values, labels and more

vue-custom-range-slider This is a simple vue-range slider, that supports custom values, labels and more. The component is based on use with v-model, t

This is an image slider developed with Vuejs 2 which comes with 20 cool transitions out of the box

Documentation and demos Version 5 documentation Version 6 documentation Version 6 demos Overview This is an image slider developed with Vuejs 2 which

Mark Brown 0 Sep 25, 2021
A round slider component for Vue JS, with range slider support. Also it can be any kind of arc slider such as pie shape, half / semi-circle, quarter circle shape sliders.

A round slider component for Vue JS, with range slider support. Also it can be any kind of arc slider such as pie shape, half / semi-circle, quarter circle shape sliders.

Soundar 54 Nov 18, 2022
Swiper - the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Vladimir Kharlampidi 33.3k Nov 23, 2022
A custom range slider for vue, that builds on the native range slider, but supports stuff like custom values, labels and more.

vue-custom-range-slider This is a simple vue-range slider, that supports custom values, labels and more. The component is based on use with v-model, t

Bjørn Nyborg 11 Oct 28, 2022
Vue-colorful-slider - An easy-to-use and quite customizable slider for Vue.js

vue-colorful-slider An easy-to-use and quite customizable slider for Vue.js Brig

Deadida 4 Aug 14, 2022
Keen-Slider a free library agnostic touch slider with native touch/swipe behavior and great performance

Keen-Slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10. Furthermore it comes with a React Hook, a React Native Hook and a Vue 3 Composition Function for easier use.

Eric Beyer 3.7k Nov 23, 2022
Webpraktyk Vue Slider is a fully responsive and customizable Vue component slider and carousel

Webpraktyk Vue Slider is a fully responsive and customizable Vue component slider and carousel. This component is compatible with Vue 3,

Krzysztof Łozowski 0 Oct 18, 2021
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Dmitry Snisarenko 259 Nov 22, 2022
vuejs image slider

Building an accordion using VUEJS and Tailwind CSS Youtube video Here is the youtube video https://youtu.be/FRdHrYBN_Jc VueJS VueJS Docs - https://vue

Recraft Relic 4 Aug 22, 2022
🌡 A highly customized slider component

?? A highly customized slider component English | 简体中文 ?? Vue3.x This is still in beta and may contain unexpected bugs, please use with caution. insta

NightCat 2.3k Nov 23, 2022