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

问题描述

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

在下图中，我们将第一个图像滑块作为 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 的工作方式，但不是每列幻灯片，而是每张幻灯片的元素。