jquery - 如何创建具有不同图像高度和宽度的图像网格 slider (砌体 slider )

Question

我想创建一个具有不同图像高度和宽度的网格图像 slider 。如下图所示。
在下图中，我们将第一个图像 slider 作为 Squire Image，将第二个 slider 作为两个矩形图像，而不是 Squire 图像并继续...

谁能推荐任何支持这种图像配置的 slider ？

Answer 1

您可以使用 Swiper.js为此，将自定义类添加到 swiper-slide元素，例如。 swiper-slide grid-squire ETC...

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide grid-squire">
            <img data-src="1.jpg" class="squire-image-type-1">
            <img data-src="2.jpg" class="squire-image-type-2">
            <img data-src="3.jpg" class="squire-image-type-3"> 
        </div>
        <div class="swiper-slide grid-rectangle">
            <img data-src="4.jpg" class="rectangle-image-type-1">
            <img data-src="5.jpg" class="rectangle-image-type-2">
            <img data-src="6.jpg" class="rectangle-image-type-3"> 
        </div>
    </div>
</div>

类似于 this有效，但不是每列幻灯片，而是每张幻灯片的元素。