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>

MDB Bootstrap轮播指示器更改位置

2 个答案: