akiran / akiran/react-slick

Finite variable width slider (that scrolls only visible slides), slides should always fill the display area

Open
#1,334 17 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
11.9k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

>I hope this is not a "big ask" but I'm stuck and I love your library as it has helped me a lot in the past.

## Overview
My issue is that I'm trying to adjust the [variable width](https://react-slick.neostack.com/docs/example/variable-width/) slider (in your documentation) in order to be:
1. `finite`
2. `responsive` (to different viewports) (if possible to display as many slides according to viewport width)
3. `scroll only 100% visible slides`
4. slides should fill the `div` display area

### Observations

1. So far, I have managed to make it:
- `finite`

2. Regarding `responsive`, breakpoints don't work well for `variable width` slides.

3. `scroll only 100% visible slides`, This is very important when it comes to variable viewport width and when using variable width slides.

4. `slides should fill the`**div**`display area`, _finite variable width slides_ when they reach the last slide, even though it was already visible by the previous scroll, the user can still scroll and what is visible is a huge area of blank slides, for example:
![blank slides visible after last slide](https://user-images.githubusercontent.com/16116003/43869254-9a2e5082-9bac-11e8-8c93-602caed61341.png)

## The Code
The issue can be replicated and tested in [code sandbox](https://codesandbox.io/s/983v21ooq4)

> I'm open to hear your expert solutions.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.