Slick thumbs on venture theme

Solved
Highlighted
Shopify Partner
4 1 0

Good day all, 

I'm using Venture theme, which uses Slick to show thumbs images on the product page.

I want to make the thumbnails bigger on mobile view. I found a way to do it by changing the "slideToShow" to show only 3 thumbs - it looks great on mobile but horrible on the desktop because it shows only 3 when there is space to show much many more. 

Another issue - Current setting is slideToShow=6 and when there is a product with only 2-3 images it still "save" space for 6 thumbs. 

(see screenshot attached)

Is there a way to fix this? 

Thanks

 

image.pngMobileimage.pngDesktop

 

0 Likes

Success.

Shopify Partner
4 1 0

Nevermind - found the solution for it. 

$productThumbsWrapper.slick({
accessibility: false,
arrows: true,
dots: false,
infinite: false,
autoplay: false,
slidesToShow: 6,
slidesToScroll: 3,
vertical: true,
verticalSwiping: true,
nextArrow: nextArrow,
prevArrow: prevArrow,
responsive: [
{
breakpoint: this.settings.smallBreakpoint,
settings: {
vertical: false,
verticalSwiping: false,
slidesToShow: 3,
slidesToScroll: 2
}
}
]
});

0 Likes