Show Swiper slider out of container - swiper.js

Question

The slider slides out of the container.
I do not want to use overflow: hidden for the container.
Here my code:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide a</div>
<div class="swiper-slide">Slide b</div>
<div class="swiper-slide">Slide c</div>
<div class="swiper-slide">Slide d</div>
<div class="swiper-slide">Slide e</div>
<div class="swiper-slide">Slide f</div>
<div class="swiper-slide">Slide g</div>
<div class="swiper-slide">Slide h</div>
<div class="swiper-slide">Slide i</div>
<div class="swiper-slide">Slide j</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5,
spaceBetween: 9,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
Look this:
image

Answer 1

You can try this solution:
const swiper = new Swiper(".swiper-container", {
// Optional parameters
loop: false,
slidesPerView: "auto",
spaceBetween: 30,
breakpoints: {
// when window width is >= 320px
300: {
slidesPerView: 1.5
},
// when window width is >= 480px
600: {
slidesPerView: 2.5
},
// when window width is >= 640px
900: {
slidesPerView: 3.5
},
1200: {
slidesPerView: 4.5
}
}
});
.swiper-overflow-container {
overflow-x: hidden;
}
.container {
overflow: visible;
outline: 2px solid red;
}
.swiper-container {
overflow: visible;
}
.item {
outline: 1px solid cyan;
}
.image {
width: 100%;
padding-bottom: 100%;
background: #808080;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-overflow-container">
<div class="container py-5">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="item">
<div class="image"></div>
<p>First</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<div class="image"></div>
<p>Second</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<div class="image"></div>
<p>Thrid</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<div class="image"></div>
<p>Four</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<div class="image"></div>
<p>Five</p>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<div class="image"></div>
<p>Six</p>
</div>
</div>
</div>
</div>
</div>
</div>
HTML:
<div class="swiper-overflow-container">
<div class="container">
<!-- swiper html here -->
</div>
</div>
CSS:
.swiper-overflow-container {
overflow-x: hidden; /* prevent horizontal scroll */
}
.swiper-overflow-container .container {
overflow: visible; /* if your container has overflow by default */
}
.swiper-overflow-container .swiper-container {
overflow: visible; /* remove swiper container overflow */
}
Limitations: not working properly with loop: true