vue-agile is a simple, customizable, touch-enabled carousel component inspired by the Slick.js library.
How to use it:
1. Import and register the vue-agile component.
// global
import Vue from 'vue'
import VueAgile from 'vue-agile'
Vue.use(VueAgile)
// in component
import { VueAgile } from 'vue-agile'
export default {
components: {
agile: VueAgile
}
}
2. Add slides to the carousel.
<template>
<agile :prop="value">
<div class="slide">
<h3>slide 1</h3>
</div>
<div class="slide">
<h3>slide 2</h3>
</div>
<div class="slide">
<h3>slide 3</h3>
</div>
...
</agile>
</template>
3. Available props.
/**
* Set the carousel to be the navigation of other carousels
*/
asNavFor: {
type: Array,
default: function () {
return []
}
},
/**
* Enable autoplay
*/
autoplay: {
type: Boolean,
default: false
},
/**
* Autoplay interval in milliseconds
*/
autoplaySpeed: {
type: Number,
default: 3000
},
/**
* Enable centered view when slidesToShow > 1
*/
centerMode: {
type: Boolean,
default: false
},
/**
* Slides padding in center mode
*/
centerPadding: {
type: String,
default: '15%'
},
/**
* Slide change delay in milliseconds
*/
changeDelay: {
type: Number,
default: 0
},
/**
* Enable dot indicators/pagination
*/
dots: {
type: Boolean,
default: true
},
/**
* Enable fade effect
*/
fade: {
type: Boolean,
default: false
},
/**
* Infinite loop sliding
*/
infinite: {
type: Boolean,
default: true
},
/**
* Index of slide to start on
*/
initialSlide: {
type: Number,
default: 0
},
/**
* Enable mobile first calculation for responsive settings
*/
mobileFirst: {
type: Boolean,
default: true
},
/**
* Enable prev/next navigation buttons
*/
navButtons: {
type: Boolean,
default: true
},
/**
* All settings as one object
*/
options: {
type: Object,
default: () => null
},
/**
* Pause autoplay when a dot is hovered
*/
pauseOnDotsHover: {
type: Boolean,
default: false
},
/**
* Pause autoplay when a slide is hovered
*/
pauseOnHover: {
type: Boolean,
default: true
},
/**
* Object containing breakpoints and settings objects
*/
responsive: {
type: Array,
default: () => null
},
/**
* Enable right-to-left mode
*/
rtl: {
type: Boolean,
default: false
},
/**
* Number of slides to scroll
*/
slidesToScroll: {
type: Number,
default: 1
},
/**
* Number of slides to show
*/
slidesToShow: {
type: Number,
default: 1
},
/**
* Slide animation speed in milliseconds
*/
speed: {
type: Number,
default: 300
},
/**
* Swipe distance
*/
swipeDistance: {
type: Number,
default: 50
},
/**
* Throttle delay in milliseconds
*/
throttleDelay: {
type: Number,
default: 500
},
/**
* Transition timing function
* Available: ease, linear, ease-in, ease-out, ease-in-out
*/
timing: {
type: String,
default: 'ease',
validator: (value) => {
return ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'].indexOf(value) !== -1
}
},
/**
* Disable Agile carousel
*/
unagile: {
type: Boolean,
default: false
}
4. API methods.
getCurrentBreakpoint() getCurrentSettings() getCurrentSlide() getInitialSettings() goTo() goToNext() goToPrev() reload()
Preview:
Changelog:
v2.0.0 (12/08/2021)
- support for Vue 3
Download Details:
Author: lukaszflorczak
Live Demo: https://lukaszflorczak.github.io/vue-agile/
Download Link: https://github.com/lukaszflorczak/vue-agile/archive/master.zip
Official Website: https://github.com/lukaszflorczak/vue-agile
Install & Download:
# Yarn
$ yarn add vue-agile
# NPM
$ npm i vue-agile --save