多项目轮播-Bootstrap 5和Material Design 2.0插件
一个高级幻灯片组件,用于循环显示具有可选数量的活动图像
项目。
注意:阅读 API 标签以找到所有可用选项,然后
高级定制
基本例子
多轮播的基本示例,最常见的用例是3个活动项(默认
版)。
<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"
alt="Gallery image 1"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
alt="Gallery image 3"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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>
垂直示例
要启用垂直模式,只需将 vertical
类添加到wrapper元素。
<div class="multi-carousel vertical" style="max-width: 20rem">
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
alt="Gallery image 2"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
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.lightbox
元素包裹轮播,以启用灯箱。
为了确保页面的正常性能,建议包括以下内容的缩略图
src属性中的图像。然后在
data-mdb-img
属性将路径添加到具有更高分辨率的图像。如果
省略了 data-mdb-img
属性,灯箱将显示与
缩小的尺寸。
<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
属性以更改活动图像的数量。
<div class="multi-carousel" data-mdb-items="2">
<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>
断点
要在易于设置的小型设备上更改断点
data-mdb-breakpoint
值(默认值为992)。设置为 false
禁用响应能力。
<div class="multi-carousel" data-mdb-breakpoint="1200">
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
alt="Gallery image 2"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
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>
自动播放
设置 data-mdb-interval
属性以启用自动播放。
<div class="multi-carousel" data-mdb-interval="2000">
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
alt="Gallery image 2"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbootstrap.com/img/Photos/Thumbnails/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"
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>