Transform your Flickity
npm install flickity-transformerAn interface for declaring granular transform effects for Flickity.

- Installation
- Usage
- Transforms
- Default units
- Examples
- Contributing
bash
yarn add flickity-transformer
or
npm i --save flickity-transformer
`Via download:
- Minified: flickity-transformer.pkgd.min.js
- Un-minified: flickity-transformer.pkgd.js
CDN:
`html
`Usage
Create a new FlickityTransformer, passing in your Flickity instance and an array of transform objects. Transforms will be applied to each Flickity cell in the order they are declared.`js
var Flickity = require('flickity')
var FlickityTransformer = require('flickity-transformer')var flkty = new Flickity('.carousel', {
// options
})
var transformer = new FlickityTransformer(flkty, [
{
name: 'scale', // Let's scale your cells...
stops: [
[-300, 0.5], // at -300px, slides will be scaled to 0.5
[0, 1], // at the home position, slides will be full size
[300, 0.5] // at 300px, slides will be half size again
]
},
{
name: 'rotate', // and add a little rotation...
unit: 'rad' // use a unit other than the default
stops: [
[-300, -1], // rotate slides to the left by 1 radian
[0, 0], // they'll be straight at center
[300, 1] // and rotated to the right
// Add as many stops as you need
]
}
])
`$3
Each object in the transforms array requires at least two properties: name and stops. Each stop in stops is an array with two values: x position in pixels relative to the home position of your carousel, and the transform value to apply at that position.| property | type | value |
| ------------- | --------- | ----------------- |
|
name | String | (required) The transform function name
| stops | Array | (required) An array of at least two transform stops. |
| unit | String | (optional) Override the default unit. |`js
// Example: rotate cells between -1rad at -300px, and 1rad at 300px:
{
name: 'rotate',
unit: 'rad',
stops: [
[-300, -1],
[300, 1]
]
}
`$3
`js
const units = {
perspective: 'px',
rotate: 'deg',
rotateX: 'deg',
rotateY: 'deg',
rotateZ: 'deg',
skew: 'deg',
skewX: 'deg',
skewY: 'deg',
translateX: 'px',
translateY: 'px',
translateZ: 'px'
}
`Examples
- Basic CodePen demo
- Simple cover-flow exampleContributing
Contributions are welcome. Top priorities are to support wrapAround: true and units other than pixels for stop positions. See issues for details. To get up and running:`bash
Install dependencies
$ npm installLint, test & build
$ npm run buildRun functional test in the browser
$ npm run functionalSee various scripts in package.json
``