如何创建具有不同图像高度和宽度的图像网格滑块（砌体滑块）

Posted 2023-03-06

【中文标题】如何创建具有不同图像高度和宽度的图像网格滑块（砌体滑块）

【英文标题】：How to create Image Grid Slider with different heights and width of image ( masonry slider )

【发布时间】：2021-06-15 09:31:12

【问题描述】：

我想创建一个具有不同图像高度和宽度的网格图像滑块。如下图所示。

在下图中，我们将第一个图像滑块作为 Squire Image，将第二个滑块作为两个矩形图像，而不是 Squire 图像并继续...

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

【问题讨论】：

你需要砖石滑块吗？

@nilesh 这些滑块是否只需要一个按钮/滑块控件，或者它们可以相互独立吗？另外，您已经尝试过任何代码吗？

我使用了光滑的滑块并使用了与答案中提到的@cezar-andrei-popescu 相同的方法，但问题在于我们将图像限制为乡绅或矩形

是的 @s.kuznetsov 和砖石滑块一样

【参考方案1】：

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

<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 的工作方式，但不是每列幻灯片，而是每张幻灯片的元素。