"slick-current" is always on first slide despite initialSlide != 0

[adroste]

v0.27.9

If I set initialSlide to something != 0, the internal index as well as the css class "slick-center" are set correctly. However, the css class "slick-current" is on the wrong element. It is always on the first one. In the example picture below the slider was rendered with initialSlide = 2.

[akiran]

Thanks for reporting. I will fix it in a day or two

[NikolaStanisavljevic]

@akiran Are there any updates on this, i've encountered same problem on same version (v0.27.9)?

[adroste]

@NikolaStanisavljevic The workaround I use right now is to not make my styling depend on slick-current. If I just ignore it and use a custom-class or even slick-center the styling works just fine.

[NikolaStanisavljevic]

@alexdroste Thank you it is good workaround.But my issue is not related to styling of slider. Setting initialSlide on page load causes sliding bug because "slick-current" is on the wrong element.

[ghost]

This bug appears only when you set infinite to false, with true value, it works. Hope it helps you

[NikolaStanisavljevic]

@morganHipay Yeah. That seems to be the problem. Thank you.

[KarenQiao]

any update? same issue here

[hungdev]

i faced same issue :/ anybody can help me?

[GaneshKosuri]

i too faced same issue

[leonace924]

@akiran , is there any solution for this? Cause I got this error too... Thank you

[tanyaburlakova]

@akiran hello! any chance to fix it? This problem is still alive.

[hayk-front]

Thanks for reporting. I will fix it in a day or two

Is it fixed on some version? I used 0.28.1 upgraded to latest 0.29, still get the problem.

[eigood]

    _this.state = _objectSpread(_objectSpread({}, _initialState["default"]), {}, {
      currentSlide: _this.props.initialSlide,
      targetSlide: _this.props.infinite ? undefined : _this.props.initialSlide,
      slideCount: _react["default"].Children.count(_this.props.children)
    });

I hot-fixed my node_modules, and added the targetSlide line. I can't currently check this out and build the package, as I do not have node.js installed into my desktop(I run everything via containers, so that my desktop can stay clean).

I was experiencing this problem with infinite=false, then using paging, and setting initialSlide=8 when slidesToScroll=4. Clicking previous would then jump to the very first page.

[asad-makhdoom]

I was experiencing same issue and I figured out that that it came due to version upgrade from 0.25.2 to 0.29.0.

On version 0.25.2, it puts both slick-center and slick-current classes on initial slide and moves both classes to the selected slide whenever the selection is changed. So if you style the selected slide using slick-current class, it was totally fine on older version.

But in newer version, 0.29.0 in my case, this implementation has been changed. Now slick-current is initially pointing to first slide even if you change the initial slide, but slick-center class is always on correct place (initial slide or selected slide).

Solution: Instead of slick-current class, use slick-center class to style initial or selected slide.

[akegvd]

@akiran Why at the latest release(0.30.0) you removed this fixed code? and when this fix will release?

ref: https://github.com/akiran/react-slick/commit/e1e766ff3b73fb26c0d8e430a7254b27d3edb6f6

For who can't wait the patch you can do something like this..

// #region - hacky initialSlide
/**
 * `initialSlide` config is currently bug on react-slide 0.30.0
 * Will remove this and change to use the config util we got patch.
 * Ref: https://github.com/akiran/react-slick/issues/1946#issuecomment-768935762
 */
const slideElementRef = useRef<Slider | null>(null);
const [hasSetInitialSlide, setHasSetInitialSlide] = useState(false);

useEffect(() => {
  if (!hasSetInitialSlide && slideElementRef.current && typeof initialSlide === 'number') {
    slideElementRef.current?.slickGoTo(initialSlide, true);
    setHasSetInitialSlide(true);
  }
}, [initialSlide, hasSetInitialSlide]);
// #endregion - hacky initialSlide

[akiran]

@akegvd I will check it and revert the fix