javascript - Slick Slider 两排,怎么样?
问题描述
如何使它有两行下面的文本?这就是我想要的: 在此处输入图像描述 我想要实现这一点。
这是我的 HTML
<div class="radio-news-slider">
<article>
<figure>
<a href="#">
<img src="img/radio-new/radio-new.png" alt=""/>
</a>
</figure>
<a href="#">Lorem ipsum dolor sit amet</a>
<p class="mb-0">
Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</article>
<article>
<figure>
<a href="#">
<img src="img/radio-new/radio-new.png" alt=""/>
</a>
</figure>
<a href="#">Lorem ipsum dolor sit amet</a>
<p class="mb-0">
Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</article>
</div>
还有更多的文章。这是此代码的输出: 在此处输入图像描述
这是我的 JS:
$('.radio-news-slider').slick({
infinite: true,
slidesToShow: 5,
prevArrow: "<i class='slick-prev pull-left fas fa-sort-up' aria-hidden='true'></i>",
nextArrow: "<i class=' slick-next pull-right fas fa-sort-up' aria-hidden='true'></i>",
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 3,
rows: 2
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 4
}
}
]
});
请帮助我如何做到这一点..
解决方案
您可以使用slidesPerRow
并rows
检查以下代码。
$('.carousel').slick({
dots: true,
/*rows: 2,
slidesPerRow: 3,*/
prevArrow: "<i class='slick-prev pull-left fas fa-arrow-left' aria-hidden='true'></i>",
nextArrow: "<i class=' slick-next pull-right fas fa-arrow-right' aria-hidden='true'></i>",
responsive: [
{
breakpoint: 576,
settings: {
slidesPerRow: 1,
rows: 1
}
},
{
breakpoint: 768,
settings: {
slidesPerRow: 2,
rows: 1
}
},
{
breakpoint: 992,
settings: {
slidesPerRow: 3,
rows: 2
}
}
]
});
.slick-slide{
img{
width: 100%;
}
}
.slick-list.draggable {
margin: 0 50px;
}
.carousel.slick-initialized.slick-slider.slick-dotted {
position: relative;
}
i.slick-prev.pull-left.fas.fa-arrow-left.slick-arrow {
position: absolute;
left: 0;
top: 42%;
cursor: pointer;
}
i.slick-next.pull-right.fas.fa-arrow-right.slick-arrow{
position: absolute;
right: 0;
top: 42%;
cursor: pointer;
}
ul.slick-dots {
text-align: center;
}
ul.slick-dots li {
display: inline-block;
margin: 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<div class="carousel">
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
<div class=""><img src="https://via.placeholder.com/150.jpg" alt=""></div>
</div>
推荐阅读
- visual-studio - Visual Studio 将所有 ImageAsset 设置为 Visible = false
- php - 如何在 echo 中调用 php 函数?
- javascript - CKEditor 小部件 - 在模板内使用变量
- python - 尝试从 Google Cloud Storage 访问文件时如何修复 403“拒绝访问”响应
- mysql - 如何在存储带有文本的表情符号时修复“内部服务器错误”
- javascript - Backbone + React +Webpack 仅设置没有 grunt
- html - 从 Jekyll 帖子中删除 https:// 协议
- c# - 从用户输入中读取我的对象的属性
- excel-formula - 带有日期和周末特殊规则的条件格式
- function - A-frame:onclick函数冲突?