Flickity Transformer
An interface for declaring granular transform effects for Flickity.
Installation
Via NPM:
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:
<!-- Minified --> <!-- Un-minified -->
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.
var Flickity = var FlickityTransformer = var flkty = '.carousel' // options var transformer = flkty name: 'scale' // Let's scale your cells... stops: -300 05 // at -300px, slides will be scaled to 0.5 0 1 // at the home position, slides will be full size 300 05 // 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
Transforms
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. |
// Example: rotate cells between -1rad at -300px, and 1rad at 300px: name: 'rotate' unit: 'rad' stops: -300 -1 300 1
Default units
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
Contributing
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:
# Install dependencies $ npm install # Lint, test & build $ npm run build # Run functional test in the browser $ npm run functional # See various scripts in package.json