轮播

旋转木马-Bootstrap 5和Material Design 2.0组件

幻灯片组件,用于循环显示元素(图像或文本幻灯片),例如轮播。

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


基本例子


          <!-- Carousel wrapper -->
          <div
            id="carouselBasicExample"
            class="carousel slide carousel-fade"
            data-mdb-ride="carousel"
          >
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"></li>
              <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"></li>
              <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"></li>
            </ol>

            <!-- Inner -->
            <div class="carousel-inner">
              <!-- Single item -->
              <div class="carousel-item active">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>First slide label</h5>
                  <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
              </div>

              <!-- Single item -->
              <div class="carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Second slide label</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
              </div>

              <!-- Single item -->
              <div class="carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third slide label</h5>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
              </div>
            </div>
            <!-- Inner -->

            <!-- Controls -->
            <a
              class="carousel-control-prev"
              href="#carouselBasicExample"
              role="button"
              data-mdb-slide="prev"
            >
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </a>
            <a
              class="carousel-control-next"
              href="#carouselBasicExample"
              role="button"
              data-mdb-slide="next"
            >
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </a>
          </div>
          <!-- Carousel wrapper -->
        

这个怎么运作

该轮播是一个幻灯片演示,用于循环播放使用CSS 3D构建的一系列内容 转换和一些JavaScript。它适用于一系列图像,文本或自定义标记。 它还包括对上一个/下一个控件和指示器的支持。

在浏览器中 页面可见性API 受支持,当用户看不到网页时,轮播会避免滑动 (例如,当浏览器选项卡处于非活动状态时,浏览器窗口将最小化,等等)。

注意:请注意,不支持嵌套轮播和轮播 通常不符合可访问性标准。

轮播不会自动规范幻灯片尺寸。因此,您可能需要使用 其他实用程序或自定义样式以适当调整内容大小。虽然轮播支持 上一个/下一个控件和指标,则没有明确要求。添加并自定义为 你觉得合适。

.active 类需要添加到一张幻灯片中 否则,旋转木马将不可见。另外,请务必在 .carousel 用于可选控件,尤其是当您在 一页。控件和指标元素必须具有 与以下ID匹配的 data-mdb-target 属性(或链接的 href .carousel 元素。


变化

仅幻灯片

这是只带有幻灯片的旋转木马。请注意 轮播图片上的 .d-block .w-100 ,以防止浏览器默认设置 图像对齐。


            <div id="carouselExampleSlidesOnly" class="carousel slide" data-mdb-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/041.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/042.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/043.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
              </div>
            </div>
          

带控件

添加上一个和下一个控件:


            <div id="carouselExampleControls" class="carousel slide" data-mdb-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/041.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/042.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/043.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
              </div>
              <a
                class="carousel-control-prev"
                href="#carouselExampleControls"
                role="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </a>
              <a
                class="carousel-control-next"
                href="#carouselExampleControls"
                role="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </a>
            </div>
          

有指标

您还可以在控件旁边将指标添加到轮播中。


            <div id="carouselExampleIndicators" class="carousel slide" data-mdb-ride="carousel">
              <ol class="carousel-indicators">
                <li
                  data-mdb-target="#carouselExampleIndicators"
                  data-mdb-slide-to="0"
                  class="active"
                ></li>
                <li data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="1"></li>
                <li data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/041.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/042.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/043.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
              </div>
              <a
                class="carousel-control-prev"
                href="#carouselExampleIndicators"
                role="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </a>
              <a
                class="carousel-control-next"
                href="#carouselExampleIndicators"
                role="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </a>
            </div>
          

带字幕

使用轻松将字幕添加到幻灯片 任何 .carousel-item 中的 .carousel-caption 元素。他们可以 轻松隐藏在较小的视口中,如下所示,并具有可选的 显示实用程序。我们最初隐藏它们 使用 .d-none 并将它们带回中型设备 .d-md-block


            <div id="carouselExampleCaptions" class="carousel slide" data-mdb-ride="carousel">
              <ol class="carousel-indicators">
                <li
                  data-mdb-target="#carouselExampleCaptions"
                  data-mdb-slide-to="0"
                  class="active"
                ></li>
                <li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1"></li>
                <li data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/041.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                  <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/042.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                  <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/043.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                  <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                  </div>
                </div>
              </div>
              <a
                class="carousel-control-prev"
                href="#carouselExampleCaptions"
                role="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </a>
              <a
                class="carousel-control-next"
                href="#carouselExampleCaptions"
                role="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </a>
            </div>
          

动画

.carousel-fade 添加到您的轮播中,以淡入淡出过渡为幻灯片动画 而不是幻灯片。


            <div
              id="carouselExampleFade"
              class="carousel slide carousel-fade"
              data-mdb-ride="carousel"
            >
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/041.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/042.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
                <div class="carousel-item">
                  <img
                    src="https://mdbootstrap.com/img/new/slides/043.webp"
                    class="d-block w-100"
                    alt="..."
                  />
                </div>
              </div>
              <a
                class="carousel-control-prev"
                href="#carouselExampleFade"
                role="button"
                data-mdb-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </a>
              <a
                class="carousel-control-next"
                href="#carouselExampleFade"
                role="button"
                data-mdb-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </a>
            </div>
          

黑暗变种

.carousel-dark 添加到 .carousel 中,以获得更暗的控件,指示器, 和字幕。


          <!-- Carousel wrapper -->
          <div
            id="carouselDarkVariant"
            class="carousel slide carousel-fade carousel-dark"
            data-mdb-ride="carousel"
          >
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"></li>
              <li data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1"></li>
              <li data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2"></li>
            </ol>

            <!-- Inner -->
            <div class="carousel-inner">
              <!-- Single item -->
              <div class="carousel-item active">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(19).webp"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>First slide label</h5>
                  <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
              </div>

              <!-- Single item -->
              <div class="carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).webp"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Second slide label</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
              </div>

              <!-- Single item -->
              <div class="carousel-item">
                <img
                  src="https://mdbootstrap.com/img/Photos/Slides/img%20(40).webp"
                  class="d-block w-100"
                  alt="..."
                />
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third slide label</h5>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
              </div>
            </div>
            <!-- Inner -->

            <!-- Controls -->
            <a
              class="carousel-control-prev"
              href="#carouselDarkVariant"
              role="button"
              data-mdb-slide="prev"
            >
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </a>
            <a
              class="carousel-control-next"
              href="#carouselDarkVariant"
              role="button"
              data-mdb-slide="next"
            >
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </a>
          </div>
          <!-- Carousel wrapper -->
        

轮播 - API


用法

通过数据属性

使用数据属性可以轻松控制转盘的位置。 data-mdb-slide 接受关键字 prev next 相对于其当前位置更改滑块位置。或者,使用 data-mdb-slide-to 将原始幻灯片索引传递到轮播 data-mdb-slide-to="2",将幻灯片位置移动到特定索引 以 0 开头。

data-mdb-ride="carousel" 属性用于将轮播标记为从页面加载开始动画。如果你不使用data-mdb-ride="carousel" 初始化 您的轮播,您必须自己对其进行初始化。 不能与(冗余和不必要的)显式JavaScript结合使用 初始化同一轮播。


        <!-- Carousel wrapper -->
        <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"></li>
            <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"></li>
            <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"></li>
          </ol>

          <!-- Inner -->
          <div class="carousel-inner">
            <!-- Single item -->
            <div class="carousel-item active">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              </div>
            </div>

            <!-- Single item -->
            <div class="carousel-item">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
            </div>

            <!-- Single item -->
            <div class="carousel-item">
              <img
                src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur.
                </p>
              </div>
            </div>
          </div>
          <!-- Inner -->

          <!-- Controls -->
          <a
            class="carousel-control-prev"
            href="#carouselBasicExample"
            role="button"
            data-mdb-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </a>
          <a
            class="carousel-control-next"
            href="#carouselBasicExample"
            role="button"
            data-mdb-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </a>
        </div>
        <!-- Carousel wrapper -->
      

通过JavaScript

手动致电轮播:


            const myCarousel = document.querySelector('#myCarousel')
            const carousel = new mdb.Carousel(myCarousel)
            

选件

可以通过数据属性或JavaScript传递选项。对于数据属性,请附加 选项名称为 data-mdb-,如 data-mdb-interval="".

Name Type Default Description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboard boolean true Whether the carousel should react to keyboard events.
pause string | boolean "hover"

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

slide string | boolean false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
touch boolean true Whether the carousel should support left/right swipe interactions on touchscreen devices.

方法

异步方法和转换:
所有API方法都是异步并开始过渡。 转换开始后,他们会立即返回给呼叫者,但 在结束之前。另外,在 转换组件将被忽略

您可以使用轮播构造函数创建轮播实例,例如进行初始化 带有其他选项,并开始循环浏览各个项目:
Method Description
cycle Cycles through the carousel items from left to right.
pause Stops the carousel from cycling through items.
prev Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.mdb.carousel event occurs).
next Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.mdb.carousel event occurs).
nextWhenVisible Don’t cycle the carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the next item has been shown (e.g., before the slid.mdb.carousel event occurs).
to Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.mdb.carousel event occurs).
dispose Destroys an element's carousel.
getInstance Static method which allows you to get the carousel instance associated with a DOM element.

          const myCarousel = document.querySelector('#myCarousel')
          const carousel = new mdb.Carousel(myCarousel)
          carousel.pause()
        

大事记

Bootstrap的轮播类展示了两个挂钩到轮播功能的事件。都 事件具有以下附加属性:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item
Event type Description
slide.mdb.carousel Fires immediately when the slide instance method is invoked.
slide.mdb.carousel Fired when the carousel has completed its slide transition.

          const myCarousel = document.getElementById('#myCarousel')
          myCarousel.addEventListener('slide.mdb.carousel', function () {
            // do something...
          })
        

变更过渡时间

.carousel-item 的过渡时间可以通过 $ carousel-transition 编译或自定义样式之前的Sass变量(如果您 使用已编译的CSS。如果应用了多个过渡,请确保变换 首先定义转换(例如 transition:转换2s缓解,不透明度0.5s缓解).


进口

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


        import { Carousel } from 'mdb-ui-kit';