PartialVisible for last slide

[sanderkooger]

Clear and concise description of the problem

We are workign on an interface for a video streaming website. in this interfce we use sliders with multiple items ( responsive (phone 3, tablet 5, lg screen 7) we would liek to display part of the slide that comes next to trigger users to know they can swipe an scroll.

Suggested solution

implement a partialVissible prop that takes a number that tells how much of the next slide should be visible.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[sanderkooger]

@onair-lena would you be willing to contribute?

[onair-lena]

@nolimits4web Vadimir, do you know if its possible to have a non centered view with a partially visible last slide?

Im also looking onto disabling vertical scrolling, we have a page filled with sliders that are stacked on top of each other, but if i enable mousewheel, scrolling down the page stops working.

We tried ForceToAxis, but it did not resolve the behaviour.

[nolimits4web]

slidesPerView: 'auto' is what you are looking for https://swiperjs.com/demos/120-slides-per-view-auto/core.html

[onair-lena]

Hey @nolimits4web, Thank you for the quick answer!

We just tried the proposed solution, but it does not allow us to show more than 1.3 images.

in our usecase we are looking to display 3.2 images for mobile, 5.2 for tablet and 7.2 for desktop.

Any suggestions?

[nolimits4web]

Look at the demo, you need to set slide's width in CSS according to your needs, 3.2 is width: calc(100% / 3.2), etc.

[onair-lena]

This solves issue. Thanks for help!