vue-agile|基于Vue.js的轮播图插件

vue-agile是一个基于Vue.js的轮播图插件，它支持响应式布局、无限循环、自动播放、分页器等功能，同时还提供了丰富的配置选项和事件。

以下是vue-agile插件的一些主要特点：

• 响应式布局：自适应移动设备和桌面设备的不同分辨率。
• 无限循环：支持无限循环轮播。
• 自动播放：支持自动播放轮播，并可配置自动播放间隔时间。
• 分页器：支持显示分页器，可自定义分页器样式。
• 丰富的配置选项：提供了多种可选的配置参数，可根据需要自定义轮播图的外观和行为。
• 丰富的事件：支持多种事件，可用于实现更多的交互效果。

使用方法

安装

如果你想要使用vue-agile，可以通过npm安装它，命令如下：

npm install vue-agile --save
// 或者使用yarn
yarn add vue-agile
		

使用

全局引用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueAgile from 'vue-agile'

createApp(App)
  .use(VueAgile)			
		

在组件中使用

import { VueAgile } from 'vue-agile'

export default {
  components: {
    agile: VueAgile
  }
}
		

通过script标签引用

<script src="https://unpkg.com/vue-agile"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-agile/dist/VueAgile.css">			
		

然后在组件中使用

配置参数

下面是 vue-agile 插件的主要配置参数：

• asNavFor: 类型为字符串或数组，表示联动的幻灯片。可以将两个或多个Vue-Agile实例链接在一起，使它们共享同一个“幻灯片场景”。使用字符串时，它应该是联动幻灯片的选择器，使用数组时，则是联动的Vue-Agile实例的数组。
• autoplay: 是否自动播放幻灯片，默认值为 false。
• autoplaySpeed: 自动播放的速度，单位为毫秒，默认值为 3000。
• centerMode: 类型为布尔值，表示是否启用居中模式。启用后，当前显示的幻灯片会居中显示，两侧的幻灯片会部分显示。默认为false。
• changeDelay: 类型为数字，表示在幻灯片更改后多久开始下一次滑动。默认为0。
• dots: 是否显示小圆点导航，默认值为 true。
• fade: 类型为布尔值，表示是否启用淡入淡出模式。启用后，切换幻灯片时，新的幻灯片将淡入，而旧的幻灯片将淡出。默认为false。
• infinite: 是否开启无限循环滚动，默认值为 true。
• initialSlide: 类型为数字，表示开始时默认显示的幻灯片索引值。默认为0。
• mobileFirst: 类型为布尔值，表示是否使用移动优先布局。在移动设备上，幻灯片宽度将填满整个窗口，而在较大的设备上，它们将居中并留有空白。默认为false。
• navButtons: 类型为布尔值，表示是否启用上一个和下一个按钮。默认为false。
• pauseOnHover: 鼠标悬停时是否暂停自动播放，默认值为 true。
• pauseOnDotsHover: 类型为布尔值，表示鼠标悬停在幻灯片下方的点时是否暂停幻灯片。默认为false。
• rtl: 是否开启从右往左的阅读方式，默认值为 false。
• responsive: 响应式配置，可以根据不同的屏幕宽度设置不同的 slidesToShow 和 slidesToScroll。
• slidesToShow: 一次展示几个 slides，默认值为 1。
• speed: 滑动速度，单位为毫秒，默认值为 300。
• swipeDistance: 类型为数字，表示滑动的距离必须大于或等于这个值才能切换幻灯片。默认为50。
• throttleDelay: 类型为数字，表示在滑动期间更新幻灯片时的延迟时间（毫秒）。默认为500。
• timing: 类型为字符串，表示幻灯片过渡动画的缓动函数。可选值有：linear/ease/ease-in/ease-out/ease-in-out。默认为"ease"。
• unagile: 类型为布尔值，表示是否禁用插件。默认为false。

方法

vue-agile 插件的可用方法如下：

• getCurrentBreakpoint：返回当前的断点名称。
• getCurrentSettings：返回当前的设置对象，包括所有默认设置和用户提供的选项。
• getCurrentSlide：返回当前的幻灯片对象。
• getInitialSettings：返回插件的最初设置，包括默认选项和用户提供的选项。
• goTo：移动到特定幻灯片。参数是索引号。
• goToNext：移动到下一个幻灯片。
• goToPrev：移动到上一个幻灯片。
• reload：重新加载插件。

事件

vue-agile 插件提供了一些可用事件，可以让开发者在轮播图发生变化时进行相应的操作。以下是一些常见的事件：

• before-slide: 当轮播图即将切换时触发。
• after-slide: 当轮播图完成切换时触发。
• breakpoint: 可以监听当前的轮播图宽度，当屏幕宽度符合某个预设的断点时，会触发该事件。

你可以通过在 vue-agile 标签上添加 @事件名 的方式来监听这些事件。例如：

其中 handleBeforeSlide 和 handleAfterSlide 是自定义的方法名，用于处理轮播图切换前和切换后的操作。

响应式

responsive允许你在不同的屏幕宽度下配置不同的选项，使得轮播图能够在不同的设备上呈现出最佳的效果。例如:

...			
		

data()
{
  return {
    myOptions: {
      navButtons: false,
      responsive: [
        {
          breakpoint: 600,
          settings: {
            dots: false
          }
        },

        {
          breakpoint: 900,
          settings: {
            navButtons: true,
            dots: true,
            infinite: false
          }
        }
      ]
    }
  }
}		
		

自定义箭头和导航圆点

vue-agile允许你一插槽的方式自定义方向箭头和导航圆点，例如：

... 



			
		

github网址：https://github.com/lukaszflorczak/vue-agile