具有17个炫酷过渡的图像滑块– vue-flux

具有17个炫酷过渡的图像滑块– vue-flux
插件名称 vue-flux
发布时间 2020年8月26日
插件作者 deulos

这是由Vuejs 2开发的图像滑块,开箱即用,具有17个很酷的过渡效果。

特征:

  • 响应式:滑块和图像适合容器以始终填充
  • 兼容性:所有主要浏览器均支持
  • 可扩展:您可以轻松添加自定义过渡
  • 定制:可定制的总量满足大多数需求
  • 手势:手势友好
  • 视差:它包含一个非常容易设置的视差组件

安装和下载:

# NPM
$ npm install vue-flux --save

将组件添加到模板。这具有所有的补充,因此您可以删除不需要的补充。

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

将其添加到组件中,就像在删除不使用的补语之前一样。

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

包含的过渡

2D过渡

  • Fade :从一张图像淡入另一张图像。
  • Kenburn:淡入淡出,缩放并将当前图像移至下一幅。
  • Swipe :滑动图像以显示下一个,就像没有被窗帘遮盖一样。
  • Slide :水平滑动图像以显示下一个图像。
  • Waterfall :将图像分成小节,然后依次降低。
  • zip:将图像分成条形,然后像拉链一样上下交替滑动。
  • Blinds 2D:将图像划分为垂直条,从而使阴影消失。
  • Blocks  1:将图像分成块,这些块会随机缩小和淡出。
  • Blocks  2:将图像分成多个块,这些块从一个角到另一个以波浪形收缩和淡出。
  • Concentric :通过旋转转换成圆圈的图像来执行同心效果。
  • Warp :通过以交替方向旋转转换成圆圈的图像来执行同心效果。
  • Camera :从外到内,图像像相机一样被圈成黑色。

3D过渡

  • Cube :将图像旋转到侧面(就像放置在立方体中一样)。
  • Book :翻页显示下一张图像的效果。
  • Fall :图像落在前面,显示下一张图像。
  • Wave:将图像制成3D并将其分成多个切片,这些切片将垂直旋转以显示下一个图像。
  • Blinds  3D:将图像分成垂直条,将竖向遮蔽180度以形成下一张图像。
  • Round 1:将图像分成几块,然后将它们水平旋转180度以形成下一张图像。
  • Round 2:面板开始沿垂直方向回合,以上方箭头的形式显示下一个图像,并留下痕迹。
  • Explode :图像开始从中心向外部爆炸。