When using swiper, why does pagination display outside of the main section in Firefox when inserting slides with different content lengths? This issue seems to only occur in Firefox and not in other browsers like Chrome. I have noticed that using two bootstrap 4 columns may be causing a height problem in Firefox but works fine in Chrome. Any help would be appreciated. Thanks in advance.
Please refer to my attached image to see the issue in Firefox.
Issue with slide containing short content:
No issues with slide containing large content:
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});.slider-content {
background-color: #000;
padding: 10%;
color: #fff;
}
.slider-content h1 {
margin-bottom: 30px;
}
.slider-content p {
font-size: 18px;
line-height: 26px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="custom-slider">
<div class="container-fluid">
<div class="row">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex flex-wrap">
<div class="col-md-6 bg-very-dark-purple slider-content">
<h1>What is Slide 01?</h1>
<p>Lorem Ipsum is simply dummy text of the prin, remaining essentially unchanged. It was popularised in the 1960s with the release of</p>
<p>Letraset sheets containing desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
</div>
<div class="swiper-slide d-flex flex-wrap">
<div class="col-md-6 bg-very-dark-purple slider-content">
<h1>What is Slide 02?</h1>
<p>Lorem Ipsum is </p>
<p>Letraset sheets including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
</div>
<div class="swiper-slide d-flex flex-wrap">
<div class="col-md-6 bg-very-dark-purple slider-content">
<h1>What is Slide 03?</h1>
<p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>