Carousel component for Vue.js

vue-agile

The Carousel component for Vue.js is a very simple & touch-friendly component, written in Vue and Vanilla JS (without jQuery dependencies) inspired by Slick. It can be used to create image carousels in variations.

Check the Demo Page.

Example

Begin by installing it to your Vue project by running

yarn add vue-agile

Import it in your main file so it can be used globally.

import VueAgile from 'vue-agile'

Vue.use(VueAgile)

Usage

Using vue-agile with background-images, fade effect

<!-- using a set of options to customize -->
<agile 
    :arrows="false" 
    :speed="1000" 
    :timing="'linear'" 
    :fade="true" 
    :autoplay="true"
>
<div class="slide slide--1">
    <img src=".." alt="">
</div>
<div class="slide slide--2">
    <img src=".." alt="">
</div>
<div class="slide slide--3">
    <img src=".." alt="">
</div>
</agile>

Every first-level child of <agile> is a new slide. Check all available options here.

If you are thinking this may help you in your current projects or in the future, take a look at the plugin's repository, available on GitHub.