click to change - unable to select a photo for a low width of the screen #181
Description
To Reproduce
Steps to reproduce the behavior:
- Open https://brainhubeu.github.io/react-carousel/docs/examples/clickToChange with Safari on iOS (iPhone) so there are three photos and the code is following:
<Carousel
clickToChange
slidesPerPage={2}
centered
>
<img src={imageOne} />
<img src={imageTwo} />
<img src={imageThree} />
</Carousel>- Set the screen to be vertical (default for iPhone) so the screen width is very low.
- Try to click on the most left photo.
- It's impossible to select the most left photo.
- Click the most right photo.
- The most right photo occupies all the carousel.
- So the only way to show the center photo is to drag.
- After dragging, the center photo is shown but not fully.
Expected behavior
4. It should be possible to select the most left photo.
6. The most right photo should occupy most of the carousel but there should be also a space for the center photo, enabling clicking it.
7. It should be possible to show the center photo not only with dragging but also with clicking it.
8. The center photo should be shown fully, with some space for the most left and the most right photo, enabling clicking them.
No photo should be cut or shrunk horizontally.
Instead, the height of the entire carousel should be decreased when needed in order to fit always the selected image and parts of its neighbors, enabling to click them.
Screenshots
Video: https://drive.google.com/file/d/1gkDYx8qPymJh8PKLjNQ3UMp39n6vd_B4/view
Smartphone (please complete the following information):
- Device: iPhone 5s
- OS: iOS 12.4.4
- Browser: Safari (AFAIK Safari version is connected with the iOS version)
react-carousel: 1.10.34
IssueHunt Summary
bunysae has been rewarded.
Backers (Total: $17.00)
piotr-s-brainhub ($17.00)
Submitted pull Requests
Tips
- Checkout the Issuehunt explorer to discover more funded issues.
- Need some help from other developers? Add your repositories on IssueHunt to raise funds.