Slick Slider - Fit Image Slider with Zoom
Some info on this demo.
Based off the Image Slider, with some adjustments.
- Card images are all different sizes. Instead of trying to scale them into place, they're positioned using
object-fit
. You'll only see part of the image, but they'll all fit correctly. - Because of #1, the card height is derived from the slider
- Then each image is set to 3/4ths of the height of the card
- In addition, there are more slides in this demo than recommended. Because of that, the slider dots won't normally fit under the slider. I adjust the width of the slider dots according to the width of the slider and the number of slides.
- Finally, this demo uses the Slick lazy loading mechanism, so they're loaded on demand as they appear.