MDB Bootstrap carousel indicators change position

Question

I'm currently working on a site that uses MDB bootstrap for all the components. I've been working on a carousel that contains cards thats moved left and right based on the indicator being clicked.

The code for the carousel section is as follows:

<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>

below is a short gif of what the carousel looks like when it's being processed.

(I know that the error is caused by the different sizes of text changing the size of the card, but I'm unsure as to how to make it a fixed size or make the indications a fixed position)

score 0 · Answer 1 · answered Jun 24 '19 at 19:35

The position of the "indicators" will adjust according to the height of the slide. If you were to make the indicators a fixed position in respect to the first slide, the indicators would overlap the text of any slide that is longer than than the first slide.

I noticed you were using a ton of break tags to create space between the indicators and (despite the inefficient use of break tags) it is one possible solution to your situation:

You would need to insert/delete break tags on each slide until the position is fixed in one place that matches the position of your longest slide. This means that on the first slide you will have several break tags that will push the indicators further down to match the position at which the indicators are located on your longest slide.

The other solution to consider is essentially the same concept of pushing the indicators down to match the longest slide but instead with the use of varying lengths of padding:

 <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>

score 0 · Answer 2 · answered Oct 21 '20 at 13:51

Even if its not professional, I found it easier and more accurate in reaching the proper size of the card to insert text (headers,paragraphs - depending on what your carousel contains) in all the carousel items to match the longest card of the carousel and set the Visibility to Hidden instead of using Breaks.

<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 carousel indicators change position

2 Answers2