React-slick: Setting fade = true displays only one slide

[jdmswong]

const settings = {
  fade: true,
  slidesToShow: 3,
  slidesToScroll: 3,
};

          <Slider {...settings}>
            {(() => {
              return (new Array(6).fill(null).map((item, i) => {
                return <h3>{i}</h3>;
              }));
            })()}
          </Slider>

slider fades but only displays the first slide, changing fade to false displays all 3.

JSFiddle demo

[jdmswong]

Refreshing this issue... This is a significant bug

[pgomez89]

Same bug. @jdmswong Can you fixed it? Thanks!!
I leave an example:
var settings = { dots: true, speed: 500, draggable: false, slidesToShow: 3, slidesToScroll: 3, arrows: true, swipe: false, fade: true }

[Morganjackson]

Has anyone had any success finding a workaround for this?

[czinco]

Make sure you don't have two of the exact same carousel slides that have the exact same image, it fooled me and made me look into this problem resulting in landing on this page.

[laveesingh]

In case of fade=true, slidesToShow has been enforced to 1.