多项目轮播 MDB Pro component

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

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

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

基本例子

多轮播的基本示例，最常见的用例是3个活动项（默认版）。

垂直示例

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

灯箱整合

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

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

HTML


          <div class="lightbox">
            <div class="multi-carousel">
              <div class="multi-carousel-inner">
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
                    alt="Gallery image 1"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp"
                    alt="Gallery image 2"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp"
                    alt="Gallery image 3"
                    class="w-100"
                  />
                </div>
                <div class="multi-carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
                    data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.webp"
                    alt="Gallery image 4"
                    class="w-100"
                  />
                </div>
              </div>
              <a class="carousel-control-prev" tabindex="0" role="button" data-mdb-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              </a>
              <a class="carousel-control-next" tabindex="0" role="button" data-mdb-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
              </a>
            </div>
          </div>

活动项目

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

断点

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

自动播放

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

多项目轮播 - API

用法

通过数据属性

HTML


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

通过JavaScript

JavaScript


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

通过jQuery

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

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)`

JavaScript


        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.

JavaScript


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

进口

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

JavaScript


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