Индикаторы карусели Bootstrap расположены в нижней части изображения, когда описание находится ниже

Question

Моя кастомная карусель Bootstrap имеет описание под изображением. Таким образом, возникает проблема, которая заключается в том, что индикаторы, расположенные вертикально, учитывают высоту описания. Поскольку текст описания варьируется, я не могу заставить индикаторы придерживаться нижней части изображения.

Поскольку фиксированный интервал не решает проблему.

.carousel-indicators {
  margin-bottom:3rem;
}

https://jsfiddle.net/virsis12/5p6wm4sL/10/

Как рассчитать высоту для описания, чтобы было применено соответствующее расстояние, чтобы индикаторы оставались внизу изображения?

Заранее спасибо!

Answer 1

Можете ли вы проверить это, добавьте этот небольшой код jQuery в document.ready (). надеюсь, это поможет вам.

var newmargin = $('.carousel-item.active p').height();
$(".carousel-indicators").css("margin-bottom", newmargin);	
$('#carouselIndex').bind('slid.bs.carousel', function (e) {
		var newmargin = $('.carousel-item.active p').height();
    $('.carousel-indicators').css("margin-bottom", newmargin);
});

.carousel-item.active p { margin-bottom: 0px;}
.carousel-indicators li {
  background:orange;
  color:purple;
  height:auto;
  text-indent: 0;
  text-align:center;
  margin-right: 8px;
  margin-left: 8px;
  border: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <div id="carouselIndex" class="carousel slide carousel-fade" data-ride="carousel">

    <ol class="carousel-indicators carousel-indicators-numbers">
      <li data-target="#carouselIndex" data-slide-to="0" class="active">1</li>
      <li data-target="#carouselIndex" data-slide-to="1">2</li>
      <li data-target="#carouselIndex" data-slide-to="2">3</li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://cdn.pixabay.com/photo/2019/10/18/17/42/season-4559795_1280.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption0">
          <p>This is very long description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://cdn.pixabay.com/photo/2010/12/13/10/09/abstract-2384_1280.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption0">
          <p>2Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://cdn.pixabay.com/photo/2012/12/09/00/16/smoke-69124_1280.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption0">
          <p>3Late night Dance ritual during summer solstice festival in Sigulda. 3Late night Dance ritual during summer solstice festival in Sigulda 3Late night Dance ritual during summer solstice festival in Sigulda 3Late night Dance ritual during summer solstice festival in Sigulda 3Late night Dance ritual during summer solstice festival in Sigulda</p>
        </div>
      </div>
    </div>
  </div>