- 首页
- 前端开发
- Slick Carousel 中的等高引导卡
Slick Carousel 中的等高引导卡
[英] Equal Height Bootstrap Cards within Slick Carousel
本文介绍了Slick Carousel 中的等高引导卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法通过光滑的旋转木马获得具有不同长度的主体内容的等高引导卡.我在这里查看了类似的答案，但它们似乎都不适用于我的场景.
我设法获得了等高的幻灯片，但由于某种原因，我无法使幻灯片中的卡片达到幻灯片(父容器)的 100% 高度.我正在尝试实现 Bootstrap 类card-deck"实现的功能，但是在轮播中.
HTML
<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="placeholder"><div class="card-body">Lorem ipsum dolor 坐在 amet consectetur，adipisicing 精英.波动，rem?</div><div class="card-footer"><a href="#" class="btn btn-primary">更多信息</a>
<div class="card"><img class="card-img-top" src="img-ph.jpg" alt="placeholder"><div class="card-body">Lorem ipsum dolor sat amet consectetur adipisicing elit.Rem, quasi soluta dolorum pariatur hic porro.</div><div class="card-footer"><a href="#" class="btn btn-primary">更多信息</a>
<div class="card"><img class="card-img-top" src="img-ph.jpg" alt="placeholder"><div class="card-body">Lorem ipsum dolor sat 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">更多信息</a>
<div class="card"><img class="card-img-top" src="img-ph.jpg" alt="placeholder"><div class="card-body">Lorem ipsum dolor 坐在 amet consectetur，adipisicing 精英.波动，rem?</div><div class="card-footer"><a href="#" class="btn btn-primary">更多信息</a>
<div class="card"><img class="card-img-top" src="img-ph.jpg" alt="placeholder"><div class="card-body">Lorem ipsum dolor sat amet consectetur adipisicing elit.Rem, quasi soluta dolorum pariatur hic porro.</div><div class="card-footer"><a href="#" class="btn btn-primary">更多信息</a>
<div class="card"><img class="card-img-top" src="img-ph.jpg" alt="placeholder"><div class="card-body">Lorem ipsum dolor sat 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">更多信息</a>
CSS
.s_container{边距:0 自动；填充:0 40px 0 40px；宽度:100%；}.滑块{边框:2px纯红色；}.slick-track {显示:弹性！重要；}.slick-slide{边距:12px；高度:自动；边框:2px纯绿色；}.slick-frame {可见性:隐藏；}
可以在此处找到运行示例:
示例
解决方案
多年来，等高一直是许多开发人员面临的问题.我认为您可以在 2 种不同的解决方案之间进行选择:
- Javascript 解决方案
您遍历所有卡片并保存最大的高度.在定义了最大的卡片后，用JS将所有卡片设置为这个高度.
https://www.bootply.com/LnwZjxWe7L
//获取卡片var card = $('.card-body');var maxHeight = 0;//循环所有卡片并检查高度，如果大于最大值则保存for (var i = 0; i
- 仅 CSS 解决方案
这个解释起来有点复杂，所以这里是一个例子:
#container3 {向左飘浮;宽度:100%；背景:绿色；溢出:隐藏；位置:相对；}#container2 {向左飘浮;宽度:100%；背景:黄色；位置:相对；正确:30%；}#container1 {向左飘浮;宽度:100%；背景:红色；位置:相对；正确:40%；}#col1 {向左飘浮;宽度:26%；位置:相对；左:72%；溢出:隐藏；}#col2 {向左飘浮;宽度:36%；位置:相对；左:76%；溢出:隐藏；}#col3 {向左飘浮;宽度:26%；位置:相对；左:80%；溢出:隐藏；}
<!-- 添加--><div id="container2"><!-- 添加--><div id="container1"><div id="col1">第 1 列</div><div id="col2">第 2 列</div><div id="col3">超长文字！哇看这段文字，太长了，要分多行！</div>
<!-- 添加-->
<!-- 添加-->
我从这里得到了这个解决方案:https://matthewjamestaylor.com/equal-height-columns
I'm having trouble obtaining equal height bootstrap cards with differing length body content with a slick carousel. I've looked at similar answers on here and none of them appear to work in my scenario.
I've managed get equal height slides but for some reason I cannot get the cards within the slides to be 100% height of the slide (parent container). I'm trying to achieve what the Bootstrap class 'card-deck' achieves but in a carousel.
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;
}
An example of running can be found here:
Example
解决方案
Equal height has been a problem for a lot of developers over the years.
In my opinion you can choose between 2 different solutions:
- Javascript solution
You loop over all the cards and save the biggest height. Set all cards to this height with JS after biggest one has been defined.
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);
}
- CSS only solution
This one is a bit more complex to explain so here is an example how to do it:
#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 -->
I got this solution from here:
https://matthewjamestaylor.com/equal-height-columns
这篇关于Slick Carousel 中的等高引导卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
