多项目轮播 MDB Pro component

多项目轮播-Bootstrap 5和Material Design 2.0插件

一个高级幻灯片组件,用于循环显示具有可选数量的活动图像 项目。

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


基本例子

多轮播的基本示例,最常见的用例是3个活动项(默认 版)。


垂直示例

要启用垂直模式,只需将 vertical 类添加到wrapper元素。


灯箱整合

div.lightbox 元素包裹轮播,以启用灯箱。

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


活动项目

设置 data-mdb-items 属性以更改活动图像的数量。


断点

要在易于设置的小型设备上更改断点 data-mdb-breakpoint 值(默认值为992)。设置为 false 禁用响应能力。


自动播放

设置 data-mdb-interval 属性以启用自动播放。

多项目轮播 - API


用法

通过数据属性


        <div class="multi-carousel" data-mdb-items="2">
          <!-- content -->
        </div>
      

通过JavaScript


        const carousel = document.getElementById('carousel');
        const instance = MultiCarousel.getInstance(carousel);
        instance.slideNext();
      

通过jQuery

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

 $('#carousel').multiCarousel('slideNext'); 

选件

Name Type Default Description
items Number / String 3 Defines number of visible items.
breakpoint Number / String / Boolean 992 Defines window breakpoint in px to show only one item. Set to false to disable.
interval Number / String / Boolean false Defines autoplay interval. Disabled as a default.

方法

Name Parameters Description Example
init Initializes multi carousel. instance.init()
slideNext Slides to the next item. instance.slideNext()
slidePrev Slides to the previous item. instance.slidePrev()
dispose Removes the MultiCarousel instance. instance.dispose()
getInstance element Static method which allows to get the carousel instance associated with a DOM element. MultiCarousel.getInstance(element)

        const carousel = document.getElementById('carousel');
        const instance = MultiCarousel.getInstance(carousel);
        instance.slidePrev();
      

大事记

Name Description
slide.mdb.multiCarousel Emitted when a multiCarousel has been slided.
slided.mdb.multiCarousel Emitted after an image slide.

        const carousel = document.getElementById('carousel');
        carousel.addEventListener('slided.mdb.multiCarousel', (e) => {
          // do something...
        })
      

进口

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


        import { MultiCarousel } from 'mdb-multi-carousel';