React-slick: Responsive feature using unslick wipes out containing divs

[yenly]

Example code here:
https://codesandbox.io/s/j1l1nn0695
https://z613xn9pk3.codesandbox.io/

Please look at the above example and change the browser size to see this critical bug.

Version 22.3 didn't have this issue. Latest version replaces slide content with empty div.

As you can see in the above screen capture, once the browser is in the setting for responsive unslick, it hits the zone where everything in

Source

[danilobuerger]

Can confirm, this worked for me in 0.22.3 and is broken afterwards.

[misstricky]

Any word as to when this fix is going to be released? Thanks!

[ryanboswell]

I don't usually like to "bump" things, but any hope for a release with this fix sometime soon?

[johnrom]

I can confirm that the fix in 56b124da9509370a33682677f205c2092f59b648 works

[AndyArcherKG]

Is there a fix of this live now?
i'm checking 0.23.1 and when i "unslick" it wipes all my content.

[misstricky]

Yes I think unslick is fixed, but, to work around what I think you're experiencing, I just went ahead and skipped all unslick behavior and put resize listeners in my component, and then only render the slideshow at screensizes where its needed, something like...

 getSettings() {
        return {
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: this.props.centerPadding,
            speed: 300,
            arrows: false,
            adaptiveHeight: false
        };
    }

    render() {
        const settings = this.getSettings();
        let filterNull = React.Children.toArray(this.props.children).filter(
            (item) => item !== null
        );

        if (
            this.state.windowWidth <= this.props.startBreakpoint &&
            filterNull &&
            filterNull.length > 1
        ) {
            return <Slider {...settings}>{this.props.children}</Slider>;
        } else {
            return <div>{this.props.children}</div>;
        }
    }
}

This is probably not the most helpful example, but, the react-slick Slider will only render if the window is less than the startBreakpoint prop here, otherwise do not render slideshow. Just not using unslick anymore.

[AndyArcherKG]

@misstricky when you say theres a fix live - is there an npm version for it?

[misstricky]

@AndyArcherKG I don't work on this project (use it a lot though!) -- but I saw that unslick being fixed was listed here, this release: https://github.com/akiran/react-slick/releases/tag/0.19.0: "implemented unslick feature properly"

-- So I think it works but I'm not sure how its really intended to work, so I just work around it and use resize listeners instead. Hope that helps! Might want to ask others who work on this project!

[AndyArcherKG]

@misstricky yeah thats fair enough i appreicate your example. I've grabbed version 0.19.0and this now seems not delete the contents when it unslicks. So definitly confirms theres a bug in 0.23.1

However this then has issues with swipe to slide.

[mskims]

How about using settings: { unslick: true }? it works at 0.23.2 for me

[t0mclaudio]

How about using settings: { unslick: true }? it works at 0.23.2 for me

This worked for me in version 0.23.2. Took me half a day looking for solution

[MrAvantiC]

This is still occuring on version 0.23.2.
Unfortunately settings: { unslick: true } does not work either...

[AllanPooley]

@mskims @akiran @laveesingh this is still an issue

Using settings:

const settings = {
    dots: false,
    arrows: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 9999,
        settings: 'unslick',
      },
      {
        breakpoint: 800,
        settings: {
          centerMode: true,
          centerPadding: '0%',
        },
      },
    ],
  };

I've had to revert to 0.22.3 to get the intended functionality

yarn remove react-slick
yarn add [email protected]

[haniotis]

Still an issue

[AllanPooley]

Still an issue as of July 2019

If you need functionality from more recent versions of react-slick, but still need to unslick at certain breakpoints, a workaround is to use conditional rendering:

import { Carousel, List } from '..';

const isClient = typeof window !== 'undefined';
const MOBILE_BREAKPOINT = 800;

class DynamicList extends Component {
  state = {
    viewportWidth: 0,
  };

  componentDidMount() {
    if (isClient) {
      this.updateWindowDimensions();
      window.addEventListener('resize', this.updateWindowDimensions);
    }
  }

  componentWillUnmount() {
    if (isClient) window.removeEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions = () => {
    this.setState({ viewportWidth: window.innerWidth });
  }

  render () {
    const { items } = this.props;
    const isMobile = Boolean(viewportWidth <= MOBILE_BREAKPOINT);
    return (
      <section className="dynamic-list">
        { isMobile ? (
          <Carousel slides={items} />
        ) : (
          <List items={items} />
        )}
      </section>
    );
  }
};

Update (Aug 2019): Don't use this if you app uses server-side rendering (SSR) - see https://github.com/gatsbyjs/gatsby/issues/15993

[AlejoSalvo95]

I am having exactly the same issue. I had to revert to [email protected] as @AllanPooley said to make it work

[cembakca]

I am having exactly the same issue. But as a workaround I did something like this;

import React from 'react';
import Slider from 'react-slick';

// find better class name :D
export default class UnslickManagement extends React.Component {
  constructor() {
    super();
    this.state = {
      slideVersion: false
    }
  }

  componentDidMount() {
    this.breakpointChecker();
  }

  breakpointChecker = () => {
    // to: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    //Polyfills for old IE support  
    // matchMedia support from media-match (https://github.com/weblinc/media-match)
    const breakpoint = window.matchMedia('(min-width: 770px)');
    if (breakpoint.matches) {
        this.setState({ slideVersion: false });
    } else {
      this.setState({ slideVersion: true });
    }
  }

  renderSlideVersion = () => {
    return (
      <Slider {...this.props.settings} className={this.props.className}>
         {this.props.children}
      </Slider>
    );
  }

  renderNormalVersion = () => (
    <div className={this.props.className}>
      {this.props.children}
    </div>
  );

  render() {
    return this.state.slideVersion ? this.renderSlideVersion() : this.renderNormalVersion();
  }
}

hopefully it will recover soon

[tusharshuklaa]

Any hopes for this to be fixed in March 2020??

[CuongCycle]

Hello guys,
I got this problem too.
I also revert to 0.22.3 and unslick works well but I got another warning about componentWillMount and componentWillReceiveProps.

So I have to use 0.25.2 and fixed the 'unslick' by using this:

In ReactJS:

settings: { unslick: true, slidesToShow: 1, slidesToScroll: 1, }

In css:

.slick-slide { float: none; }

Everything is fine for now.
Hope this help.

[akiran]

Fixed in [email protected]