如何解决Slick Slider 两排,怎么样?
如何让它有两行下面的文字? 这就是我要的: enter image description here 我想达到这个目标。
这是我的 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>
还有更多文章。 这是此代码的输出: enter image description here
这是我的 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,{
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。