first of all, we need to add slick.js, slick-theme.min.css, slick.min.css in the CSS and js folders of Magento _ui respectively. Then create a custom js file and add the following js code for now I named it sliders.js
define([
'jquery',
'slick'
],function ($, slick){
$(document).ready(function(){
$('.marquee').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1281,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 813,
settings: {
slidesToShow: 2,
slidesToScroll: 3,
}
},
{
breakpoint: 824,
settings: {
slidesToShow: 2,
slidesToScroll: 3,
}
},
{
breakpoint: 1201,
settings: {
slidesToShow: 3,
slidesToScroll: 4,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 4,
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 3,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
},
{
breakpoint: 375,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
});
we also need to add the following code in the magento_ui/layout/default_head_block section