电子商务图库 MDB Pro component

电子商务图库-Bootstrap 5和Material Design 2.0插件

专为电子商务项目设计的MDB图库/灯箱组件。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

一个画廊的基本示例,最常见的用例是带有引导网格和 悬停时激活。

为了确保页面的正常性能,建议包括以下内容的缩略图 src属性中的图像。然后在 data-mdb-img 属性将路径添加到具有更高分辨率的图像。如果 省略了 data-mdb-img 属性,灯箱将显示与 缩小的尺寸。


在mouseenter上激活

可以通过添加一个 具有 mouseenter 值的 data-mdb-activation 属性。


变焦效果

data-mdb-zoom-effect 设置为true可以在悬停时放大主图像。




不同的位置

顶部的缩略图

在主图像之前轻松添加轮播,以查看其上方的缩略图。

右边的缩略图

在第二栏中添加轮播,以在右侧显示缩略图。


不同的缩略图编号

2个缩略图

设置 data-mdb-items =“ 2” 以使两个缩略图可见。

4个缩略图

设置 data-mdb-items =“ 4” 以使四个缩略图可见。


不同的图像尺寸

卧式转盘

图像尺寸会自动根据视图进行调整。

立式转盘

在垂直旋转木马中,它也可以工作。


相等的图像尺寸

一个具有相等大小图像的画廊的基本示例,其中 data-mdb-auto-height 属性设置为 true

电子商务图库 - API


用法

通过数据属性


        <div class="ecommerce-gallery" data-mdb-activation="mouseenter">
          <!-- content -->
        </div>
      

通过JavaScript


        const gallery = document.getElementById('gallery');
        const instance = EcommerceGallery.getInstance(gallery);
        instance.dispose();
      

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。

 $('#gallery').ecommerceGallery('dispose'); 

选件

Name Type Default Description
activation String 'click' Defines image toggle mouse event.
autoHeight Boolean false Changes active image styling to auto height.
zoomEffect Boolean false Hovering over the image enlarges it in the given place.

方法

Name Parameters Description Example
init Initializes EcommerceGallery. instance.init()
dispose Removes the EcommerceGallery instance. instance.dispose()
getInstance element Static method which allows to get the gallery instance associated with a DOM element. EcommerceGallery.getInstance(element)

        const gallery = document.getElementById('gallery');
        const instance = EcommerceGallery.getInstance(gallery);
        instance.dispose();
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { EcommerceGallery } from 'mdb-ecommerce-gallery';