Swiper JS carousel not fitting inside of Bootstrap 4 col - html

Question

I'm trying to put a Swiper JS carousel inside a div with the col class of Bootstrap 4, but my carousel doesn't stay inside the col div. To illustrate, this is the layout I'm trying to achieve:
But for some odd reason when I put the carousel code in the second col div, my page ends up like this:
Messing with the carousel properties with the Inspect Element tool, I found out that what causes this is the property display: flex that the swiper-wrapper has, and I still haven't been able to figure out how to make the carousel fit nicely within my second col div.
I've tried encapsulating the swiper-container in another div, setting max-width: 100%and min-width: 100% but nothing seems to work, it's like the display: flex property of the row class conflicts with the display: flex of the swiper-wrapper div.
Here's the code for this part of the layout:
HTML
<div id="myaboutdiv" class="row">
<div class="col topic">
<p>TEXT</p>
</div>
<div class="col mt-5">
<p class="text-left whoami"><i>This is some text</i></p>
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem purus, venenatis vel magna et, consectetur cursus libero. In augue est, iaculis sit amet faucibus ut, condimentum vitae ante. Donec et leo eu dolor suscipit viverra at et mauris. Quisque dapibus leo at ipsum elementum, sit amet interdum sapien ornare. Integer justo lorem, porttitor in gravida in, porttitor at tellus. Sed aliquet malesuada luctus. Duis ac nisl vitae nibh mattis luctus eget a ex.
</p>
<br>
<p class="text-left whoami"><i>Here's the Swiper Carousel</i></p>
<div class="swiper-container" id="academichistory">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
CSS
.topic {
font-weight: bold;
font-size: 2.5rem;
}
.whoami {
color: grey;
font-weight: 500;
}
And finally, here are some screenshots:
swiper-wrapper with display: flex:
swiper-wrapper without the display: flex property:
I'm using:
Swiper v5.3.6 and Bootstrap 4.
And just in case, here's the JS code that initializes the Swiper carousel:
JavaScript
var swiper = new Swiper('#academichistory', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

Answer 1

You can solve it using absolute positioning.
Since .swiper-container already has position: relative, you can add position: absolute to .swiper-wrapper. In addition, position it using left: 0 and top: 0.
Finally, the swipper absolutely positioned needs an explicit height, so add the height you want in .swiper-container.
.swiper-container {
height: 270px;
}
.swiper-wrapper {
position: absolute;
left: 0;
top: 0;
}