为什么分页显示在swiper的Firefox主要部分之外？

Question

当我插入一些幻灯片大内容和一些幻灯片短片内容而不是其他浏览器（如chrome）时，为什么分页显示在Firefox中的主要部分。我会尝试我认为两个bootstrap 4列高度不起作用在Firefox也工作正常的Chrome浏览器请帮助我。谢谢，谢谢。

看到我的附件图片在Firefox中有什么问题。

发布内容短的幻灯片：

没有问题幻灯片大内容：

        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>

Answer 1

问题在于不同幻灯片上的内容。第一张幻灯片的内容比其他两张更多。跟着这些步骤。

• 删除padding: 10%并将display: flex和align-items: center发给.slider-content
• 使用flex，您可以将内容调整为居中。
• 将这些内容包装在div中
• 把min-height送给.swiper-slide

var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

.slider-content {
                background-color: #000;
                /*padding: 10%;*/
                color: #fff;
                display: flex; /* Added */
                align-items: center;
            }
            .slider-content h1 {
                margin-bottom: 30px;
            }
            .slider-content p {
                font-size: 18px;
                line-height: 26px;
            }
            /* New CSS */
            .swiper-slide {
              min-height: 370px; /* give as per your requirement */
            }

<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">
                                <!-- caption wrapper -->
                                    <div>
                                      <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>
                                 <!-- caption wrapper ends -->   
                                </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">
                                  <!-- caption wrapper -->
                                    <div>
                                      <h1>What is Slide 02?</h1>
                                      <p>Lorem Ipsum is </p>
                                      <p>Letraset sheets including versions of Lorem Ipsum.</p>
                                    </div>
                                  <!-- caption wrapper ends -->  
                                </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">
                                  <!-- caption wrapper -->
                                    <div>
                                      <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>
                                   <!-- caption wrapper ends --> 
                                </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>

工作小提琴here