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 标签上添加 @事件名 的方式来监听这些事件。例如:


  
			
		

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

响应式

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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部