How can I adjust the settings of my slick slider track?

Store Design
1

Hi I have this slick slider and I have been able to modify its settings so that it displays 1.5 products on mobile. However, now the firstly displayed product is cut in half, although I want the second one to be cut in half to indicate to user that he has to swipe in order to view more. The issue is with js settings for slick slider, but I’m struggling to find where I can modify the:

transform: translate3d(-336px, 0px, 0px); when the first value is set to 0 instead of -336px in inspect, it does the job that I want, however I cannot find this in the code. Any help?

My preview is: https://cskm2aneafljjnov-26608304175.shopifypreview.com

SIVA2020_0-1692272446979.png
SIVA2020_0-1692272446979.png2796×1366 372 KB

2

Hello,

For this issue, you need to update the slick slider script here:

responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]

Thank you

Pooja

3

This doesn’t do what I need, I’ve tried modifying the script. I need to have 1.5 products displayed for mobile screen, though I don’t want my first product to be cut in half but rather the second one

4

Okay, for that you can use this code:

centerMode: true,
centerPadding: ‘20%’,

Thank you