React-slick: Preview of previous and next slides like netflix

[mysteryhobo]

I'm attempting to create a Netflix style carousel with 3 requirements:

1. Lazy loading.
2. Allow for SlidesToScroll to be greater than 1.
3. Show a fraction of the next and previous slides at the sides of the page (see Netflix).

While attempting to solve for requirement 3, I tried overriding the css for the slick-list class to allow for visible overflow ie:

.slick-list {
  overflow: visible !important;
}

This works, however, when lazy loading is enabled it prevents the next and previous slides from being loading until scrolled to, thus breaking the effect. This can be seen here: https://codesandbox.io/s/lrox9mr35z

My next attempt tried making use of the centerMode option but unfortunately, centerMode restricts the slidesToScoll to 1 thus breaking requirement 2. CenterMode example: https://react-slick.neostack.com/docs/example/center-mode

Is there another way to achieve this effect or is the addition of a new setting required?

Thanks

[kngroo]

I think you can set slidesToShow to a non-integer value to show a portion of the next slide.
For example, setting it to 1.5 will show 1 slide and half of the next one.

[mysteryhobo]

Hmm.. interesting, I don't think this quite solves the problem though. Since the half card will always be shown on the left and not equally divided on both sides.

[kngroo]

You could also try variableWidth

[oyeanuj]

@mysteryhobo Where did you end up with this? Did you figure out a solution, and if so, would you be willing to share your finding?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.