Slides getting wrong width and navigation issue

[Pinnokkio]

Hey,

I stuck in various problems. I'm using VueJS 3 and Swiper 11.0.3.

1. Slides are getting the wrong width. For example, I want to show 1 slide on mobile, 2 or 3 on tables and 4 or 5 on desktop view. So how do I fix this? I've tried several things like adjusting sizes for swiper container or wrapper but I couldn't get it to work.

<Swiper
    :breakpoints="breakpoints"
    :slidesPerView="1"
    :spaceBetween="15"
    navigation
    :pagination="{ clickable: true }"
>

breakpoints: {
    768: { slidesPerView: 2 },
    1024: { slidesPerView: 3 },
    1248: { slidesPerView: 4 },
    1536: { slidesPerView: 5 }
},

When resizing the browser window, the slider reduces the amount of visible slides as expected. But for an unknown reason, on lower width, the total width of the slider is way too much:

Mobile view (500 px):

Tablet view (1032 px):

Desktop view (1920 px):

Desktop view (2560 px):

I have a container with a max with of 96 rem (display block), centered horizontally in its parent (margin: 0 auto). And the slider always have a full width of 96 rem.

2. I cannot click the arrows on mobile/tablet view to slide to the next one. How do I fix this?

Thank you!