如何创建具有不同图像高度和宽度的图像网格滑块砖石滑块

如何解决如何创建具有不同图像高度和宽度的图像网格滑块砖石滑块

我想创建一个具有不同图像高度和宽度的网格图像滑块。看起来像下图。

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

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

解决方法

您可以为此使用 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 的工作方式，但不是每列幻灯片，而是每张幻灯片的元素。