wrapAround incompatibility with a 2-slide carousel

jnicol commented 5 years ago

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.

desandro commented 5 years ago

Thanks for reporting this issue. I'll take a look.

skillmatic-co commented 5 years ago

Bumping, have the same issue.

timkirtley commented 5 years ago

Also have same issue

albell commented 5 years ago

Hey @desandro any intel on this? This is sort of a dealbreaker. Super hard to explain this to a client. 😬 If this is just a quick fix to the opacity math I might be up for it.

laurelstreng commented 5 years ago

Also running into the same issue

laurelstreng commented 5 years ago

@albell I also needed this for a client and a quick/dirty fix I found was to leave fade set to true and update my CSS to:

    .carousel-cell {
      opacity: 0 !important;
      transition: opacity 1s ease !important;
      &.is-selected {
        opacity: 1 !important;
      }
    }

discoliam commented 5 years ago

Just to confirm @laurelstreng fix worked for us perfectly. Thanks :)

ste6412 commented 5 years ago

I also had a similar issue, though not with fading. I have four cells in view which flickered when sliding. using the fix above by @laurelstreng and setting initial opacity to 1.

Thanks for the fix :)

wolffe commented 5 years ago

Same here. Any updates planned? I know that Metafizzy is now lower priority, but is there any roadmap?

CHEWX commented 5 years ago

+1 on a fix here.

yllip commented 5 years ago

Same problem in our end too.

wgeorgecrisan commented 4 years ago

Thank you +1

clarknelson commented 4 years ago

+1 :)

alexbogias commented 4 years ago

Thanks for the fix! +1 for a better one @desandro :smile:

joshuapease commented 4 years ago

I think I have a potential fix for this issue. It might not be the root cause, but it works great for me.

https://github.com/metafizzy/flickity-fade/pull/11

alexb148 commented 4 years ago

I am also having this issue. Any fixes coming?

It is a particular problem in a CMS driven site, where the client sometimes only uploads 2 images to a gallery component.

sunnyt7 commented 4 years ago

This still isn't fixed :(

acflint commented 4 years ago

+1 for this issue! Still a problem, though @laurelstreng's solution worked for now.

alex-figge-schuster commented 4 years ago

facing the same problem. +1 for a fix @desandro

frazerf commented 4 years ago

Thanks @laurelstreng - your fix worked a treat!

ziyadElon commented 3 years ago

Why was this closed? Still having this issue.

marcmedhat6211 commented 3 years ago

I am also having the same problem and i don't know how to explain this issue for the client so i decided to start using the swiper plugin, it covers this issue and many other issues. https://swiperjs.com/swiper-api

dpw1 commented 2 years ago

@laurelstreng Thank you so much! You saved me.

dpw1 commented 2 years ago

I am also having the same problem and i don't know how to explain this issue for the client so i decided to start using the swiper plugin, it covers this issue and many other issues. https://swiperjs.com/swiper-api

Just as a heads up:

Be careful if you are sticking with Swiper and using lots of images.

I am currently migrating a huge e-com from Swiper to Flickity because it was not able to scale - having more than 15 images on the same slider was freezing the page.

Between all the most popular alternatives (Flickity, Slick, Swiper, Owl Carousel), Flickity was the only one able to properly handle things. (in my experience, of course).