akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.76k stars 2.11k forks source link

AdaptiveHeight doesn't animate like original #1802

Open robertocinetto opened 4 years ago

robertocinetto commented 4 years ago

Hi guys thank you for the amazing work.

I was just noticing that if i set adaptiveHeight: true works but it doesn't have smooth animation like the original slider.

You can see even on react-slick docs https://react-slick.neostack.com/docs/example/adaptive-height/

Do you have any speedy fix?

Thank you!

robertocinetto commented 4 years ago

Oh sorry i've simply add CSS transition to .slick-list div and it works.

Anyway by default the original slider works like that. You can close this if you want.

Tadejo9 commented 3 years ago

Hello

I'm having the same problem with animating adaptive height.

My settings object

  const settings = {
    className: "",
    dots: false,
    arrows: false,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    pauseOnHover: false,
    autoplay: true,
    speed: 5000,
    autoplaySpeed: 0,
    cssEase: "linear",
  };

Slider usage

<Slider {...settings}>
    <div>
        <img src={Image1} />
    </div>
    <div>
        <img src={Image2} />
    </div>
    <div>
        <img src={Image3} />
    </div>
</Slider>

https://user-images.githubusercontent.com/44469307/120523672-764b5c00-c3d6-11eb-95c3-d49b5a436fd5.mov

It is "jumping" up and down for couple of images and then in stalls as shown in the video above.