Gap first slide (issue #2808)

[mgntrn]

I'm looking for a solution to the problem as described in #2808. Because that ticket is closed, I'm not sure whether my posts can be seen. Anyway, this is what I'm trying to accomplish: I would like the first slide to be on the left, and then show a part of the [third or fourth] slide, like in many contemporary apps. I don't want to use center mode, because this is confusing to my users: the slider is only containing a small number of slides. Maybe I'm looking at it the wrong way, but I really can't find a solution to this seeingly simple problem.

Here are two examples (Airbnb and Spotify) of what I'm trying to accomplish, both sliders are non-infinite like I want them to be. The Spotify slider has no 'stops' (number of slides to scroll), so the behavior of the Airbnb slider is more like that of Slick.

[thihathit]

you need to recalculate width with variableWith: true; let's say if ur container max-width has 1000px and u want to show 3 slides and 1 preview so total is 4 slides. Then set the width of slides that will exceed to 1000px in total. For example, if you set 250px, the slides will not have preview because 250 x 4 = 1000, Slides will be filled fully to it's container. So increase it to 310px, i.e 310 x 4 = 1240, which exceed to it's container. There you can have 3 slides with 1 preview.

Check this example. https://codepen.io/thihathit/pen/GxRGPB

[thihathit]

Here's updated one with padding. https://codepen.io/thihathit/pen/MVWBXm

[swarad07]

I have a similar problem, I had been using centermode with a vertical slick slider uptil now, which worked perfectly, but when I changed it to horizontal I see a empty gap before the first slide.

While I understand the reasoning behind using centermode with infinite only, I have been keeping it ON so that user can scroll to the last slide, i:e the last slide in my list gets the slick-active and slick-current classes, I have certain additional meta data that has been embedded in the li which I use based on slick-current, I want to have a similar behaviour on horizontal mode too.

If I do centermode false then since I am showing 3 slides at a time, the slick next gets disabled once I reach the last 3 slides, so user cannot use the next button to activate the last two slides.

I think if we are making it work in vertical we should make it work in horizontal too, would love to have a fix for this in library without forcing me to write custom JS to manipulate the classes.

[seonggookang]

Here's updated one with padding. https://codepen.io/thihathit/pen/MVWBXm

I really appreciate this reply for newbie like me. If you know the infomation about that code in react, please let me know. This is what I've been looking for! I need to make the left gap of the first slide to be narrow than others. and also the right gap of the last slide to be narrow than others too.

[thihathit]

For React, you're better off going with something like Splidejs or Swiper.