Carousel component for Vue.js
Clone or download
Latest commit 23eae38 Feb 8, 2018
Permalink
Failed to load latest commit information.
build Final demo site Aug 5, 2017
config Fixed assets public path Aug 5, 2017
demo Demo and doc for v0.3 Oct 27, 2017
docs v0.2.2 Aug 10, 2017
src Update Agile.vue Feb 8, 2018
static Demo images optimalization Aug 7, 2017
.babelrc Starting files May 29, 2017
.editorconfig Starting files May 29, 2017
.eslintignore Updated basic files Jun 20, 2017
.eslintrc.js Starting files May 29, 2017
.gitignore Remove /dist Aug 7, 2017
.npmignore Fix /dist again Aug 7, 2017
LICENSE Initial commit May 29, 2017
README.md Update README.md Oct 31, 2017
package.json 0.3.7 Feb 8, 2018
yarn.lock Small CSS and dependencies upgrades Oct 30, 2017

README.md

vue-agile

Carousel component for Vue.js inspired by Slick.
More powerful with each version, touch-friendly, written in Vue and Vanilla JS (without jQuery dependency).

Demo & examples

🤝 Thanks to Maciej Wach for inventing the name, testing and motivation.


Please note that the plugin is currently in relatively early development phase. I try to keep the stability of each version and keep up with all issues, but unfortunately at this stage there may still be some bugs.


Important – update from version < 0.3

In version 0.3.0, I removed all styles that are responsible for the appearance of navigation elements (like dots color and shape, arrows position, etc.). I think most people use their own styles and default styles are completely redundant. If you want to check out these defaults styles, you can find them here.

Additionally dots and arrows have been moved from the .agile__list to the main .agile container. The layout is the same as in Slick and id should allow for better and more comfortable positioning of these elements.

Installation

yarn add vue-agile

or

npm install vue-agile

Usage

import Vue from 'vue'
import VueAgile from 'vue-agile'

Vue.use(VueAgile)
<template>
    <main>
        <agile>
            <div class="slide">
                <h3>slide 1</h3>
            </div>
            
            ...
            
            <div class="slide">
                <h3>slide n</h3>
            </div>
        </agile>
    </main>
</template>

Every first-level child of <agile> is a new slide.

Options

Parameter Type Default Description
arrows boolean true Enable prev/next arrows
prevArrow string (HTML/SVG) <svg> Prev arrow code – more in „Arrows” section
nextArrow string (HTML/SVG) <svg> Next arrow code – more in „Arrows” section
autoplay boolean false Enable autoplay
autoplaySpeed integer (ms) 3000 Autoplay interval in milliseconds
dots boolean true Enable dot indicators/pagination
fade boolean false Enable fade effect
infinite boolean true Infinite loop sliding
mobileFirst boolean true Enable mobile first calculation for responsive settings
options object null All settings as one object
pauseOnHover boolean true Pause autoplay when a slide is hovered
pauseOnDotsHover boolean false Pause autoplay when a dot is hovered
responsive object null Object containing breakpoints and settings objects
speed integer (ms) 300 Slide animation speed in milliseconds
timing string ease Transition timing function
(linear/ease/ease-in/ease-out/ease-in-out)
unagile boolean false Disable agile carousel

Example

<agile :arrows="false" :dots="false" :infinite="false">
    ...
</agile>

Responsive

To customize responsiveness, I recommend defining desired breakpoint and passing a settings object with the options to modify inside options.

Example

<agile :options="options">
    ...
</agile>
data () {
    return {
        options: {
            arrows: false,
            
            responsive: [
                {
                    breakpoint: 600,
                    settings: {
                        dots: false
                    }
                },
                
                {
                    breakpoint: 900,
                    settings: {
                        arrows: true,
                        dots: true,
                        infinite: false
                    }
                }
            ]
        }
    }
}

Arrows

By default carousel contains SVG arrows. You can change them using CSS or prevArrow & nextArrow parameters.

There are two important things:

  1. You should put your SVG/HTML code in one line, without new line chars etc.
  2. You should define arrows code as variables in data().

Example

<agile :prevArrow="left" :nextArrow="right">
    ...
</agile>
export default {
    data () {
        return {
            left: '<svg x="0px" y="0px" viewBox="0 0 24 24"><path d="M16.2,21c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L9.6,12L17,4.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L6.8,12l8.8,8.7C15.7,20.9,16,21,16.2,21z"/></svg>',
            right: '<svg x="0px" y="0px" viewBox="0 0 24 24"><path d="M7.8,21c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l7.4-7.3L7,4.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.8,8.7l-8.8,8.7C8.3,20.9,8,21,7.8,21z"/></svg>'
        }
    }
}

v-if & v-show

If you have dynamically loaded slides, use v-if to show carousel when slides will be ready. Using v-if is also recommended in other situations if you want to hide/show the slideshow.

If for some reason you need to use v-show, it's also possible, but you have to use an additional parameter show with the same value as for the v-show.

Example

<button @click="toggleAgile()">Toggle carousel</button>

<agile v-show="isActive" :show="isActive">
    ...
</agile>
toggleAgile () {
    this.isActive = !this.isActive
}

SSR Support

The component uses browser specific attributes (like window and document). It is necessary, so probably the only option is to run vue-agile only on the client-side. It was tested on nuxt v1.0.0-rc7 and works fine.

Example

// plugins/vue-agile.js

import Vue from 'vue'
import VueAgile from 'vue-agile'

Vue.use(VueAgile)
// nuxt.config.js

module.exports = {
    plugins: [
        { src: '~/plugins/vue-agile', ssr: false }
    ]
}
<no-ssr placeholder="Loading...">
    <agile>
        ... 
    </agile>
</no-ssr>

PS. If you know a better way to work the component with SSR please, let me know about it.

Contributing

# install dependencies
yarn install
 
# serve with hot reload at localhost:8080
yarn run dev
 
# create UMD bundle.
yarn run bundle