Slick slider fixed width images create loop problems

https://www.avenuesofawakening.com

The original Slick slider scaled the width of images based on viewer window width. This caused image to become very elongated, which I don't like, so I tried to fix a width for my images using Custom CSS:

.slick-slide {width: 400px !important}

While this does resize the images, it also introduces a lot of blank space in the slick-track, and creates a jarring loop. I have pored over other forum posts about this, and no one else seems affected in this way. Most responses just say to turn on variablewidth, which I have done:

variableWidth: true,

I hope to specify a fixed width image, and have a smooth autoplay loop on the slider. What am I doing wrong? My feeling is the JS is calculating all the widths of these elements and translation amounts without regard to my CSS override.

Happy to post entire JS, but it's all default except variableWidth.

https://stackoverflow.com/questions/66947421/slick-slider-fixed-width-images-create-loop-problems April 05, 2021 at 09:50AM