Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
58
rated 0 times [  61] [ 3]  / answers: 1 / hits: 7155  / 3 Years ago, sat, april 3, 2021, 12:00:00

How do I make it have two rows with text below?
This is what i want:
enter image description here
I want to achive this.


this is my 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>

And more aticles.
This is output from this code:
enter image description here


This is my 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
}
}
]
});

Please help me how to do this..


More From » html

 Answers
4

You can use slidesPerRow and rows check the below code.




$('.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>




[#1539] Monday, March 29, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
longd

Total Points: 616
Total Questions: 110
Total Answers: 101

Location: Andorra
Member since Sat, May 27, 2023
1 Year ago
;