Closed adroste closed 9 months ago
Thanks for reporting. I will fix it in a day or two
@akiran Are there any updates on this, i've encountered same problem on same version (v0.27.9)?
@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.
@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.
This bug appears only when you set infinite
to false, with true value, it works. Hope it helps you
@morganHipay Yeah. That seems to be the problem. Thank you.
any update? same issue here
i faced same issue :/ anybody can help me?
i too faced same issue
@akiran , is there any solution for this? Cause I got this error too... Thank you
@akiran hello! any chance to fix it? This problem is still alive.
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.
_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.
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.
@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
@akegvd I will check it and revert the fix
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.