I've been attempting to embed a Swiper JS carousel within a Bootstrap 4 col class div, but the carousel refuses to stay inside the designated col container. Here's a visual representation of what I'm aiming for:
https://i.sstatic.net/lgicC.png
However, when I place the carousel code in the second col div, my layout ends up looking like this:
https://i.sstatic.net/WKFZA.png
After investigating with the Inspect Element tool, I discovered that the culprit is the display: flex property applied to the swiper-wrapper. Despite my efforts to adjust properties such as max-width: 100% and min-width: 100%, I have yet to find a solution to ensure the carousel fits neatly within the second col div.
This section of the layout looks like this in HTML:
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;
}
Additionally, here are screenshots showing the swiper-wrapper with and without the display: flex property:
https://i.sstatic.net/OpUnR.png
https://i.sstatic.net/zlBGr.png
The technologies being used include Swiper v5.3.6 and Bootstrap 4. Below is the JavaScript code utilized to initialize 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',
},
});