标题：Bootstrap Carousel - 具有独特高度过渡的居中卡片

问题描述 投票：0回答：0

描述：

我正在开发一个 Bootstrap Carousel，它可以在中等屏幕上显示五张卡片。我想为居中的卡片实现独特的样式，其高度比其他卡片稍大。此外，我想添加一个 CSS 过渡，以便每当轮播滑到新项目时，以动画方式平滑地对居中卡片的高度变化进行动画处理。

当前实施：

我已经使用 col-md-2.4 类成功实现了一个 Bootstrap Carousel，其中在中屏幕上显示五张卡片。轮播工作正常，我可以使用下一个和上一个按钮滑动卡片。

挑战：

现在，我需要动态调整居中卡片的高度，使其看起来比其他卡片更高。我希望当用户单击下一个或上一个按钮时，居中的卡片会根据当前活动的幻灯片进行更改。

尝试的解决方案：

我尝试使用以下 JavaScript 代码来计算可见卡片中最高的卡片高度，并相应地设置居中卡片的高度：

var carousel = document.getElementById("recipeCarousel");
carousel.addEventListener("slid.bs.carousel", function () {
  var activeSlide = carousel.querySelector(".carousel-item.active");
  var cards = activeSlide.querySelectorAll(".card");
  var tallestCardHeight = 400;
  cards.forEach(function (card, index) {
    if (index === 2) {
      card.style.height = tallestCardHeight + "px";
    } else {
      var cardHeight = card.offsetHeight;
      if (cardHeight > tallestCardHeight) {
        tallestCardHeight = cardHeight;
      }
    }
  });
});

问题：

虽然 JavaScript 逻辑看起来正确，但我在实现居中卡片所需的高度调整方面遇到困难。高度变化并没有通过 CSS 过渡平滑地实现动画效果。

期望的结果：

我正在寻求有关当轮播滑动到新项目时如何正确地将 CSS 过渡应用于居中卡片的高度变化的指导。我希望高度过渡平滑并且对用户具有视觉吸引力。

任何有关如何实现此效果的帮助、建议或见解将不胜感激。预先感谢您的协助！

代码示例：

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
    const minPerSlide = 5
    let next = el.nextElementSibling
    for (var i = 1; i < minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

var carousel = document.getElementById("recipeCarousel");
carousel.addEventListener("slid.bs.carousel", function () {
    var activeSlide = carousel.querySelector(".carousel-item.active");
    var cards = activeSlide.querySelectorAll(".card");
    var tallestCardHeight = 400;
    cards.forEach(function (card, index) {
        if (index === 2) {
            // Set the height of the card with index 2 to the height of the tallest card
            card.style.height = tallestCardHeight + "px";
            // card.classList.add('centered-card')
        } else {
            // Get the height of the card and compare it to the tallest card
            var cardHeight = card.offsetHeight;
            if (cardHeight > tallestCardHeight) {
                tallestCardHeight = cardHeight;
            }
        }
    });
});
@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
      display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
  align-items: center;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(20%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-20%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
transform: translateX(0);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="./test.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  
  <div class="container text-center my-3">
    <h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
    <div class="row mx-auto my-auto justify-content-center">
        <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-2.4">
                        <div class="card">
                            <div class="card-img">
                                <img src="https://via.placeholder.com/500x400/31f?text=1" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 1</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-2.4">
                        <div class="card">
                            <div class="card-img">
                                <img src="https://via.placeholder.com/500x400/e66?text=2" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 2</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-2.4">
                        <div class="card">
                            <div class="card-img">
                                <img src="https://via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 3</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-2.4">
                        <div class="card">
                            <div class="card-img">
                                <img src="https://via.placeholder.com/500x400?text=4" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 4</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-2.4">
                        <div class="card">
                            <div class="card-img">
                                <img src="https://via.placeholder.com/500x400/aba?text=5" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 5</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-2.4">
                        <div class="card">
                            <div class="card-img">
                                <img src="https://via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 6</div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
    </div>
    <h5 class="mt-2 fw-light">advances one slide at a time</h5>
  </div>

</div>
  



  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="test.js"></script>
</body>
</html>

css css-transitions carousel bootstrap-5
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.