Почему отображение страниц из основного раздела в Firefox осуществляется с помощью swiper?

Question

Почему разбиение на страницы выводится из основного раздела в Firefox с помощью swiper, когда я вставляю некоторый большой слайд-контент и небольшой слайд-контент, чем те, которые возникают в Firefox, а не в другом браузере, подобном Chrome. я постараюсь, я думаю, что высота двух колонок начальной загрузки 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>

рабочая скрипка здесь