Slick Slider Modification

[afiumano]

We would like the thumbnails to all be the same 'width' on desktop and same 'height' on mobile but we have vertical and horizontal thumbnails. The thumbnails are correct on desktop (not mobile) based on how we set dimensions in admin for the thumbnails. But it seems maybe imagemachine is placing heights on the divs around the thumbnails causing huge spaces between thumbs. https://dts2290.mivamerchantdev.com/southern-magnolia-memorial-tree.

Is there a way to get this to just have equal spacing between each thumb for desktop and mobile?

[Matt Zimmermann]

Unfortunately, Slick has some issues when it comes to vertical carousels with images of different heights. There are several suggestions on how to remedy this, but none have been implemented yet. If you are feeling adventurouse, you could try some of the suggestions in this thread and request:

• https://github.com/kenwheeler/slick/issues/1803
• https://github.com/kenwheeler/slick/pull/3565

[afiumano]

Thanks for the tip. I tried implementing the one fix below but it didn't change anything unfortunately.

if (_.options.vertical === false) { targetLeft = ((slideIndex * _.slideWidth) * -1) + _.slideOffset; } else { verticalOffset = 0; for (let i = 0; i < slideIndex; i++) { verticalOffset += _.$slides.eq(i).outerHeight(true); } if (_.options.infinite === true) { Array.from(_.$slideTrack[0].children).forEach((slide) => { if (slide.dataset.slickIndex < 0) { verticalOffset += $(slide).outerHeight(true); } }); } targetLeft = verticalOffset * -1; }

[afiumano]

I know Slick has issues with vertical carousels but am wondering if the attached screen shot is part of this glitch or something else. There is a huge amount of space between the thumbnails.

[Matt Zimmermann]

That looks like it is being caused by the calculations to make the image areas equal. Do you have an image that is quite a bit taller than the rest?

[afiumano]

Vertical image as shown in screen shot is 320x480. Horizontal images are 480x319. So the image in the screen shot would be the tallest.

[Matt Zimmermann]

That is where the space is coming from. The code is making all the thumbnail regions the same width and height as the largest of them.