I know there is already an answer to this but I just found a better solution using the variableWidth parameter, just set it to true in the settings of each breakpoint, like this:
$('#featured-articles').slick({
arrows: true,
autoplay: true,
autoplaySpeed: 3000,
dots: true,
draggable: false,
fade: true,
infinite: false,
responsive: [
{
breakpoint: 620,
settings: {
arrows: true,
variableWidth: true
}
},
{
breakpoint: 345,
settings: {
arrows: true,
variableWidth: true
}
}
]
});