v-flickity

A Vue component wrapper around the Flickity carousel.

Peer Dependenices

npm install vue

Installation

Add a scope mapping for the GitHub npm package manager by adding a .npmrc file with the line:

@romancow:registry=https://npm.pkg.github.com/

Then install the package:

npm install @romancow/v-flickity

yarn add @romancow/v-flickity

More info on using the GitHub npm package registry here.

Usage

Basic Example

import VFlickity from '@romancow/v-flickity'

new Vue({
	components: { VFlickity },
	el: '#app',
	data: {
		cells: ["one", "two", "three", "four"]
	}
})

<div id="app">
	<v-flickity wrap-around auto-play no-page-dots>
		<template>
			<div v-for="cell in cells">{{ cell }}</div>
		<template>
	</v-flickity>
</div>

Options / Props

All Flickity Options correspond to Vue component props.

In addition, boolean Flickity options with a default value of true (i.e. pauseAutoPlayOnHover, accessibility, setGallerySize, resize, prevNextButtons, and pageDots) also have corresponding no props (noPauseAutoPlayOnHover, noAccessibility, noSetGallerySize, noResize, noPrevNextButtons, and noPageDots). This is because, since they are true by default, it's likely to only be specifying them to set them to false:

<v-flickity no-set-gallery-size no-page-dots no-prev-next-buttons>

<v-flickity :page-dots="false"> will still work as well, if you prefer that form.

API / Methods

The Flickity API methods correspond to Vue component methods. There are a couple of ways you can access them.

First, via a Vue ref:

new Vue({
	components: { VFlickity },
	el: '#app',
	data: {
		cells: ["one", "two", "three", "four"]
	},
	methods: {
		randomize: function() {
			const index = Math.floor(Math.random() * this.cells.length)
			this.$refs.carousel.select(index)
		}
	}
})

<div id="app">
	<v-flickity ref="carousel">
		<template>
			<div v-for="cell in cells">{{ cell }}</div>
		<template>
	</v-flickity>
	<button @click="randomize">Random</button>
</div>

Or via slot data:

<div id="app">
	<v-flickity>
		<template v-slot="carousel">
			<div v-for="cell in cells" @click="carousel.stopPlayer()">{{ cell }}</div>
		<template>
	</v-flickity>
</div>

Some Flickity methods that provide direct DOM access (prepend, append, insert, remove, destroy, getCellElements) are not mapped as component methods to discourage direct DOM manipulation. But if you really want to use them, you still can by accessing them on the Flickity instance directly (this.$refs.flickity.instance.getCellElements()).

NOTE: The Flickity's resize method has been renamed as resizeCarousel on the VFlickity component so it does not clash with the resize option/property.

Events

Flickity events are mapped as Vue component events.

new Vue({
	components: { VFlickity },
	el: '#app',
	data: {
		cells: ["one", "two", "three", "four"]
	},
	methods: {
		cellSelected: function(index) {
			const cell = this.cells[index]
			console.log(cell, "- selected")
		}
	}
})

<div id="app">
	<v-flickity @select='cellSelected'>
		<template>
			<div v-for="cell in cells">{{ cell }}</div>
		<template>
	</v-flickity>
</div>

romancow / v-flickity