vue-agile|基于Vue.js的轮播图插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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