Bounds Spacing & Unable To Scroll To Last Index

[Rafcin]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-default-react-forked-rjwjn?file=/src/Swiper/styles/index.tsx

Bug description

I've been playing around with carousels and I looked at the carousel on the Google News app, Facebook and Airbnb for examples. I'm attempting to make a carousel that slides off the screen slightly and can conform to the margins of a specific container. In my above example i'm trying to modify the first-child and last-child of the list and when I apply margins get the desired space I want on the left, however on the right I can no longer scroll to the end.

I could not find another way to properly change the left and right margins to fit specific bound requirements. In many cases i'd like to insert the carousel into a set of blogs or a shopping page and in it's default state the first card should align with the rest of the content however the scrolling issue is something i've been unable to resolve.

Example: Imgur

Expected Behavior

The idea is that you ca scroll left and right fully.

Actual Behavior

The scroll only goes partially to the end.

Swiper version

7.0.5

Platform/Target and Browser Versions

Chrome 93.0.4577.82

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.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR