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>

下面是旋转木马在处理时的样子的简短 gif。

（我知道错误是由不同大小的文字改变卡片的大小引起的，但我不确定如何将其设置为固定大小或将指示设置为固定位置）

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>

Answer 2

即使它不专业，我发现在所有轮播项目中插入文本（标题、段落 - 取决于轮播所包含的内容）以匹配最长的卡片更容易和更准确地达到卡片的适当大小轮播并将可见性设置为隐藏而不是使用中断。

<h1 class = "card-title-text" style = "visibility: hidden">Lorem ipsum dolor sit amet</h1>
   <p class = "card-text" style = "visibility: hidden"> discere platonem mediocritatem sea ne, sea ut velit democritum elaboraret. Posse conceptam ea per. Vivendum legendos inimicus pri id, ut eos consulatu pertinacia moderatius.</p>