React-slick: Slide + fade animation

[vugman]

Is it possible to enable the fade animation when switching/swiping between slides?

[cgalbiati]

Created pull request to add this: https://github.com/akiran/react-slick/pull/686

[jlbb]

Meanwhile, an alternative solution that just involves CSS would be to add a rule to your global styles, as follows:

.slick-slider-fade .slick-track
{
   -webkit-transform: none!important;
   -moz-transform: none!important;
   -ms-transform: none!important;
   -o-transform: none!important;
    transform: none!important;
}

where slick-slider-fade will be a class added to the settings configuration of our slider, for example:

import React from 'react';
import Slider from 'react-slick';
import PrevArrow from './PreviousArrow';
import NextArrow from './NextArrow';

const HeroSlider = ({ data }) => {
  const settings = {
    dots: false,
    infinite: true,
    slidesToShow: 1,
    useCSS: 1,
    slidesToScroll: 1,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    initialSlide: 0,
    fade: true,
    className: 'slick-slider-fade',
  };

  return (
    <Slider {...settings}>
      {data}
    </Slider>
  );
};

export default HeroSlider;

Adding this className will only stop the transform rule in the specified slider, keeping others with the default behavior.
Hope it helps ;)

Maybe this can help to fix #187 , #585 and #603

Just mention to @cgalbiati that I downloaded and built your pull request changes but it didn't worked for me out of the box, maybe I missed something or the react-slick library was updated, making your solution not working properly, I don't know. Just in case this helps to review the solution or help to understand what I did wrong :)

[laveesingh]

Problems related to fade+swipe were solved in the previous release. I'm closing this for now. If someone still faces any issue similar to this, please feel free to open another one.