Индикаторы карусели MDB Bootstrap меняют положение

Question

В настоящее время я работаю над сайтом, который использует загрузчик MDB для всех компонентов.Я работал над каруселью, которая содержит карты, которые перемещались влево и вправо в зависимости от нажатия на индикатор.

Код для секции карусели выглядит следующим образом:

<div style="align-items:center" class="carousel-container">
                            <div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">

                                <!--Controls-->
                                <div class="controls-top">
                                    <a class="btn-floating" href="#carousel-example-multi" data-slide="prev">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                    <a class="btn-floating" href="#carousel-example-multi" data-slide="next">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </div>
                                <!--/.Controls-->
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-multi" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-multi" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-multi" data-slide-to="2"></li>
                                    <li data-target="#carousel-example-multi" data-slide-to="3"></li>

                                </ol>

                                <!--/.Indicators-->
                                <!--carrosellll-->
                                <div class="carousel-inner v-2" role="listbox">

                                    <div class="carousel-item active">


                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in London, UK<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                            </p>

                                        </div>

                                    </div>
                                    <div class="carousel-item">
                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in Calgary, Canada.<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                                            </p>

                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in Canary Islands, Spain.<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <div class="card-body">
                                            <h4 class="card-title font-weight-bold">Random Name</h4>
                                            <h6 class="card-title">Position</h6>
                                            <p class="card-text">
                                                Based in Bangkok, Thailand.<br><br>

                                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.                                                <br><br><br><br />
                                            </p>
                                        </div>
                                    </div>

                                    <a class="carousel-control-prev" href="#carousel-example-multi" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carousel-example-multi" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>

                                </div>
                                <br /><br /><br />
                            </div>
                        </div>

ниже - это короткий рисунок того, как выглядит карусель при обработке.

(Я знаю, что ошибка вызвана различными размерами текста, меняющими размер карты, но я не уверен, как сделать ее фиксированным илипоказания фиксированной позиции)

Answer 1

Положение «индикаторов» будет регулироваться в зависимости от высоты слайда. Если бы вы сделали индикаторы фиксированными по отношению к первому слайду, индикаторы перекрывали бы текст любого слайда, который длиннее первого слайда.

Я заметил, что вы использовали тонну тегов перерыва для создания пространства между индикаторами, и (несмотря на неэффективное использование тегов перерыва) это одно из возможных решений вашей ситуации:

Вам нужно будет вставлять / удалять теги разрыва на каждом слайде, пока позиция не будет зафиксирована в одном месте, которое соответствует позиции самого длинного слайда. Это означает, что на первом слайде у вас будет несколько тегов разрыва, которые будут толкать индикаторы дальше вниз, чтобы соответствовать позиции, в которой расположены индикаторы на самом длинном слайде.

Другое решение, которое следует рассмотреть, - это та же концепция нажатия индикаторов вниз, чтобы соответствовать самому длинному слайду, но вместо этого с использованием переменной длины отступа:

 <p class="card-text" style="padding-bottom: 10px;"> Based in London, UK<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>