React-slick: Default setting for slider isn't aligned left

[jackyef]

On previous version (0.16.0), I could have the Slider to align left, but starting from 0.17.1, it doesn't have the same behavior.

Picture taken from: http://neostack.com/opensource/react-slick

On my project:
v 0.17.1:

v 0.16.0:

Both use the same settings:

  const sliderSettings = {
      autoplay: false,
      autoplaySpeed: 5000,
      pauseOnFocus: true,
      pauseOnHover: true,
      dots: false,
      arrows: false,
      infinite: false,
      speed: 500,
      slidesToScroll: 1,
      draggable: true,
      swipeToSlide: true,
      variableWidth: true,
    };

It's as if the Slider is forcing the component to align RIGHT instead of the usual LEFT in previous version of react-slick. Is this intended or a bug?

[tracethompson]

+1

[rachel-rocks-at-ruby]

+1

[AndriiUhryn]

+1

[Macrovarius]

+1

[julian-ronayi]

+++

[ilyaskl]

++

[ig0rkin]

+1

[Shvarts]

+1

[sandor0213]

+1

[maKSiM89]

+1

[khyzhun]

+2

[stas-zozulja]

+1

[FullstackJack]

This is not good. Is there a setting to configure this?

[FullstackJack]

Tried rtl: true, that moved everything to the left, but it reversed the order and some of the items glitched and were missing/hidden.

[FullstackJack]

The problem is related to transform on the slick-track. If you turn off that CSS property, it looks correct.

[FullstackJack]

https://github.com/akiran/react-slick/commit/91199e49c2d6b07ead2fa6acef08096057cee133

That definitely has to be the problem. The track transition was rewritten and looks like it didn't account for lists with less than enough slides.

[FullstackJack]

I'd recommend rolling back to 0.15.0 until this is fixed.

[AdamMcCormick]

We're seeing this on v0.15.0 when we upgrade to react 16

[FullstackJack]

Ok, it's not React 16. Just tested 0.15.0 with React 16 and that looks right. The problem started in [email protected] with the above mentioned PR.

[tracethompson]

Also tested 0.15.0 with React 16 and it looks correct. @FullstackJack is correct, i think

[AdamMcCormick]

OK, sorry for the false alarm

[AndriiUhryn]

If I use version 0.15.0 and up to 0.17.1 I have some extra space after the last item in the slider.
If I use version from 0.17.1 and upper I have some extra space at the start, before the first item.

React 16.

Is there any way to display it correctly, maybe I'm missing something?)))

[FullstackJack]

I haven't had the chance to review to algo written in trackHelper, but the transform calculation is what needs fixing. I'll take a look today if I have some time.

[AndriiUhryn]

Hi, I just wanted to ask, how many time approximately do you need to fix this bug? I am writing some new cool stuff and need this on prod.

[laveesingh]

On it!

[laveesingh]

071a29cea6e1b99f66cc49c20ed2c2e6131e3bb9

[AndriiUhryn]

@laveesingh When do you plan to release these updates?

[laveesingh]

Probably by Monday

[jackyef]

This is still happening even in 0.20.0, can we reopen this? @laveesingh

[mgiraldo]

happening in 0.20.0 react 16. downgrading to 0.15.0 fixed the problem.

[laveesingh]

I'm not sure if that's happening in version 0.20.0. Could someone create a working demo for this on codesandbox?

[jackyef]

@laveesingh sorry for taking so long. Here is a demo for the behavior at 0.20.0
https://codesandbox.io/s/3x7kl81pr5
https://3x7kl81pr5.codesandbox.io/

[MickeyKay]

@akiran any update here? Still seeing this issue in 0.23.1

[jota12x]

Came up with this problem today. The problem is that slick-track has a margin-left:auto and margin-right:auto by default. Changing those styles to 0 solved it for me.

[icorne]

https://github.com/kenwheeler/slick/pull/2966

[shamseerahammedm]

So whats the fix for this ? stuck with the same problem ?

[AdamMcCormick]

@shamseerahammedm They (@laveesingh) closed it with a "fix" that didn't actually work. You'd probably have to re-file the ticket to get any motion on it

[rahulmawari]

.slick-list> div {
margin-left:0;
}

This worked for me

[p666888]

+1

[jkang0408]

+1

[lewtakm]

Whole problem is caused by infinite option. If you turn it down it will work fine.