Slick Slider 两行，怎么样？

Question

如何让它有两行，下面有文字？这就是我要的： 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
            }
        }
    ]
});

请帮我看看怎么做..

Answer 1

您可以使用 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>

Slick Slider 两行，怎么样？

Slick Slider two rows, how?

html

javascript

jquery

slider

slick.js