Would be great to be able to set the fade transition speed, similar to how you can set the speed of the slider with selectedAttraction and friction.

Hi, appreciate the work on this! I am a bit confused how to use this with standard webpack builds.

Question

If using import Flickity from "flickity-fade". Can I initialize all of my flkty instances with that import and will they behave just like import Flickity from "flickity".?

I ask because I'm using code splitting and would like to keep my instance imports the same across my application regardless of if they are using the slide or fade effect.

Investigation

From looking at the code it appears you are requiring the main Flickity package and returning it. So we should technically be able to just use this package to initialize but I'd like to double check.

Suggestion

I would make this section of the readme clearer for those users that want to use a combination of fade and slide effects across their site. I.E if a user is using a combination of fade and slide effects they have to install both packages but can initialize all instances with 'flickity-fade'.

Hello! I used this code to override the default slide:

.flickity-slider{ transform: none !important; }
.cell {
left: 0 !important;
opacity: 0;
transition: "opacity 0.3s ease-in-out";
}
.cell.is-selected{
opacity: 1;
}

This though overrides slide on both mobile and desktop. How can I make larger screens to still be on fade while mobile to use slide?
Thanks!

Thanks for the plugin! Unfortunately, the slideshow stops autoplaying as soon as I click on it.
pauseAutoPlayOnHover = false doesn't have an effect, neither does draggable = false.

Any workaround for this?

Test case: https://codepen.io/luksak/pen/QPXoxr

While working on my current project I encountered a bug on Mobile Safari. When switching through slides, in some cases previously selected slides are still visible. To reproduce this, I have to move through the slider for quite some time. I couldn't find a pattern when this happens until now.

Hi,

If you run bower install flickity-fade --save

I've just getting an empty directory.

Thanks,
Tom

Please help, I got this error when using flickity-fade package (with cdn)

Here is the css cdn package

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity-fade@2/flickity-fade.css">

Here is the carousel html and the script set up
<div class="testimonial-carousel">
....carousels div....
</div>

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/flickity-fade@2/flickity-fade.js"></script>
<script>
$('.testimonial-carousel').flickity({
// options
fade: true,
cellAlign: 'left',
contain: true,
prevNextButtons: false
});
</script>

i don't figure out why this slide fade not working, only run in the dom like i am using normal flickity package but, it shown error like img below

Using flickity.pkgd.min.js + fade script throws the following error:

Cannot set properties of undefined (setting 'fade')

Test case: https://codepen.io/anteksiler/pen/QWadjXP

When there are two slides and wrapAround option is true, the fade is mucked up. It looks like the opacity values are being set as a negative number for one slide (0 ... -1) and values above 1 for the other slide (1 ... 2). The result is that the carousel immediately jumps to the next slide rather than fading.

Test case: https://codepen.io/jnicol/pen/daVWQB

If there are 3 or more slides then the issue is not present.

I'd like the ability to include all the Flickity packages from CDNJS.
Any chance this can happen?
Looks like some basic info is missing from the repos in order to accomplish this - namely a license:

Hi, I'm using webpack and when I attempt to use flickity-fade with flickity-as-nav-for, fade breaks and it reverts back to a swipe.

When I remove flickity-as-nav-for, fade starts working again.

Thanks

When options fade: true & wrapAround: true are passed with only 2 images rendered, there is a brief flicker when we go from index 0 to 1 or index 1 to 0.

https://codepen.io/jmanlapid/pen/rNNbvxO

There seems to be a slight flicker when looping from the last to the first slide. Any idea on how to alleviate the issue? Perhaps a pure CSS solution (that's how I did fading prior, but it also had a visual bug when looping).

Test case: https://codepen.io/desandro/pen/azqbop

Not really a bug, but I am having troubled using this package along with Typescript. I only found @types for the main flickity package but not for this one.

Cannot find module 'flickity-fade'.ts(2307)

Any help/direction would be very helpful. TIA

pointer event issue

Should the progress variable be abs to prevent a case where it may be negative. This would result in 1 - (- progress) a value greater than 1.

I don't have exact steps to replicate this issue but this was the outcome after tracing the issue a -progress.

Please help, I got this error when using flickity-fade package

My init

Flickity work fine but fade in not working

Unfortunately fade doesn't happen (on/off) when using lazyLoad 🌝

Test case: https://codepen.io/johnthepainter/pen/xxxKLyJ