elcontraption/flickity-transformer

Transform your Flickity.

flickity-transformer's Issues

Support for units other than px for transform stops x position

Relevant line of code:

// Get proximity to carousel home
xPos = slide.parent.x < 0 ? slide.target - Math.abs(slide.parent.x) : slide.target + slide.parent.x

Usage for multiple flickity instances

Hey!

Is it possible to initialise flickity-transformer for multiple flickity elements on the same page? Using the code below, only the last instance found has the transformer properly applied.

var coverflowEl = document.querySelectorAll("[data-coverflow]");

coverflowEl.forEach(function(instance, index) {
  var flkty = new Flickity(instance, {
    prevNextButtons: false,
    pageDots: false
  });

  var flktyTransform = new FlickityTransformer(flkty, [
    {
      name: 'scale',
      stops: [
        [-100, 0.5],
        [0, 1],
        [100, 0.5]
      ]
    }
  ])
})

Error when try to insert new cell.

flickity.pkgd.js version: 2.2.1

flickity-transformer.pkgd.js version:0.3.6

When I try to insert new cell by flickity api, I got this error and everything not work any more.

Uncaught TypeError: Cannot read property 'style' of undefined
    at FlickityTransformer.applyTransforms (flickity-transformer.pkgd.js:342)
    at Array.forEach (<anonymous>)
    at Flickity.<anonymous> (flickity-transformer.pkgd.js:280)
    at Flickity.proto.emitEvent (flickity.pkgd.js?v=0.01:254)
    at Flickity.proto.dispatchEvent (flickity.pkgd.js?v=0.01:1637)
    at Flickity.proto.dispatchScrollEvent (flickity.pkgd.js?v=0.01:1044)
    at Flickity.proto.positionSlider (flickity.pkgd.js?v=0.01:1023)
    at Flickity.proto.animate (flickity.pkgd.js?v=0.01:1002)
    at Flickity.proto.startAnimation (flickity.pkgd.js?v=0.01:992)
    at Flickity.proto.select (flickity.pkgd.js?v=0.01:1680)

translateZ seems to not work

I modified the basic example in CodePen, but with the slides having no horizontal margin and I applied translateZ in the hopes zIndex would interpolate on drag. But I can't get it to work. Have you tried to do something like this?

Flickity 3.0 Support?

The transform is not compatible with Flickity 3.0 and the examples are currently broken.

Add ability to change transform function units

Currently you're stuck with the defaults that are set here.

Test/add support for more transform functions

We're currently limited to what is set here.

Replace d3-scale with something lighter weight

Must support clamp and a piecewise (multi-stop) scale.

Unbundle d3-scale in commonjs module

d3-scale should not be included in the commonjs module.

Write more useful tests

Current tests leave much to be desired.

Support wrapAround: true

This is closely tied to issue #7.

Relevant line of code:

// Get proximity to carousel home
xPos = slide.parent.x < 0 ? slide.target - Math.abs(slide.parent.x) : slide.target + slide.parent.x

Does it work as a 360 slider?

Hi Darin

Could Flickity Transformer work as a 360-product slider? Trying to accomplish something like this: https://polarnotion.github.io/turntable (needs jquery)

Would love to accomplish it with Flickity if its possible. Any pointers on how to make that?

Thanks!