Swiper show three elements plus part of another one (want only 3)-CodePudding

I try to do a carousel with Swiper.js but even after following a tutorial, I can't have 3 frames display. I end up with 3 plus a part of another one.

I think I must have a margin somewhere but can't find it

Here's the codepen to show what I mean : https://codepen.io/MakeThisWork/pen/jOKjPpK

I tried to change the width of my elements, to change the margin or the padding, but nothing seems to work

I've also tried to change slidesPerView to 2.9 (not enough) and 3.1 (too much)

Even this post, didn't help: Swiper JS - show part of next slide

CodePudding user response：

The first thing, you don't need to set the slidesPerView to 2.9, you can keep it as 3 and it will work.

The second and the important part, is the problem here, all the problem is the border of the slides, the border property increases the width and height of the element, and when increasing the slide size, everything works wrong in your swiper.

You can handle that by just adding box-sizing to your slide set to border-box like that:

.swiper-slide {
    border: 2px solid green;
    height: 90% !important;
    box-sizing: border-box;
}

Or just remove your border and put background for example.