$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
a {
height: 100px;
width: 100px;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img {
height: 100%;
display: block;
margin: auto;
}$(function(){
$('.your-class').slick({
slidesToShow: 4,
slidesToScroll: 1,
appendArrows: $('.your-class-arrow'),
prevArrow: '<button id="prev" type="button" class="btn btn-juliet"><i class="fa fa-chevron-left" aria-hidden="true"></i> Туда</button>',
nextArrow: '<button id="next" type="button" class="btn btn-juliet">Сюда <i class="fa fa-chevron-right" aria-hidden="true"></i></button>'
});
});<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<div class="your-class-arrow"></div>