这是由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 ：图像开始从中心向外部爆炸。