Slick Carousel 中的等高引导卡

Question

我无法通过光滑的旋转木马获得具有不同长度正文内容的等高引导卡。我在这里查看了类似的答案，但它们似乎都不适用于我的场景。

我设法获得了等高的幻灯片，但由于某种原因，我无法让幻灯片中的卡片达到幻灯片（父容器）的 100% 高度。我正在尝试实现 Bootstrap 类 'card-deck' 实现的功能，但在轮播中。

HTML

<div class="container">
        <div class="row">
            <div class="col-10 mx-auto s_container">
                <div class="slider">
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>

CSS

.s_container{
margin: 0 auto;
padding: 0 40px 0 40px;
width: 100%;
}

.slider{
border: 2px solid red;
}

.slick-track {
display: flex !important;
}

.slick-slide{
margin: 12px;
height: auto;
border: 2px solid green;
}

.slick-frame {
visibility: hidden;
}

可以在此处找到运行示例：

Example

Answer 1

多年来，等高一直是许多开发人员的问题。 在我看来，您可以在 2 种不同的解决方案之间进行选择：

1. Javascript 解决方案

您遍历所有卡片并保存最大的高度。在定义最大的一张之后，用 JS 将所​​有卡片设置为这个高度。

https://www.bootply.com/LnwZjxWe7L

// Get cards
var cards = $('.card-body');
var maxHeight = 0;

// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}

1. 仅 CSS 解决方案

这个解释起来有点复杂，所以这里是一个例子：

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

<div id="container3"> <!-- added -->
    <div id="container2"> <!-- added -->
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>
        </div>
    </div> <!-- added -->
</div> <!-- added -->

我从这里得到了这个解决方案： https://matthewjamestaylor.com/equal-height-columns