I have 7 items in a swiper which is set to show 6. The edge of the 7th item shows on the right side of the swiper (which is fine). The user swipes and the 7th comes into view. But, as soon as the user releases the swiper bounces back to the start position. This effectively makes the 7th item inaccessible. I add an 8th item and the swiper will stay put after the swipe.
How do I stop the bounce back when there are only 7 items?
Do you have live example or JSFiddle with the issue?
Try this URL: https://eventscope.github.io/es-fr7-app/. If you use a laptop rather than phone, separate your tab and make the window as narrow as possible.
Note that none of the scroll sections make their last image fully visible after releasing mouse or finger. The swiper bounces back and only shows half the element. Seems to me that if one is actually at the end, the last element on the right should be fully displayed and the left element should be the one that is a partial. Either that, or the swiper should stick where the user leaves it when releasing.
Make sense?
In your case you can just set slidesPerView: 'auto' instead of 6. It doesn’t fit to the screen width correctly
Thanks. I really appreciate the quick responses. And, now only one image shows up per swipe. The auto does not seem to calculate width of the image correctly. No I need to manually set how wide each column is when using auto?
I fixed this by going back to 6 elements and adding data-slides-offset-after=“50” (which is the width of my elements).