Question

媒体组件包括哪些大型媒体对象，比如图片、视频、音频，等等。

Material 盒子

Material 盒子是来源于Lightbox 插件的 material design。当用户单击图片它会变大。Material 盒子平滑的使图片居中并且变大。再次单击还原。或者通过ESC键。

创建上面图片的效果，只要增加一个 materialboxed 类到图片标签中。

<img class="materialboxed" width="650"
src="https://www.wenjiangs.com/wp-content/uploads/2020/docimg2/sample-1.jpg">

初始化

Material 盒子是自动初始化的。然而如果你想动态的增加图片，你需要增加这个初始化代码。

$(document).ready(function(){
  $('.materialboxed').materialbox();
});

标题

给相片添加一个短标题是很容易的。只要增加这个标题作为 data-caption 属性值。

<img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250"
src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">

轮播

这是一个简单优雅的图片轮播。你可以让轮播的图片带标题，设置标题的对齐方式。你也可以设置显示轮播底部的指标。

注意：这也兼容 Hammer.js，试着用用你的手指来滚动图片。

<div class="slider">
    <ul class="slides">
<li>
  <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  <div class="caption center-align">
    <h3>这是一个巨大的标签行</h3>
    <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
  </div>
</li>
<li>
  <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  <div class="caption left-align">
    <h3>左对齐标题</h3>
    <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
  </div>
</li>
<li>
  <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  <div class="caption right-align">
    <h3>右对齐标题</h3>
    <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
  </div>
</li>
<li>
  <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  <div class="caption center-align">
    <h3>这是一个巨大的标签行</h3>
    <h5 class="light grey-text text-lighten-3">这是我们的小口号。</h5>
  </div>
</li>
    </ul>
</div>

全屏轮播

你可以使这个轮播作为全屏轮播通过增加类 fullscreen 到轮播的div中，这是一个快速入门的例子。

jQuery 初始化

$(document).ready(function(){
$('.slider').slider({full_width: true});
});

jQuery 插件选项

选项名称	描述
Indicators	设置为false隐藏轮播的指标。(默认: True)
Height	设置轮播的高度 (默认: 400)
Transition	设置一次轮播动画过渡的时间（毫秒）。(默认: 500)
Interval	设置轮播之间转换的时间（毫秒） (Default: 6000)

jQuery 插件方法

我们提供了中止、启动、移动到下一幕、上一幕的方法。

// Pause slider
$('.slider').slider('pause');
// Start slider
$('.slider').slider('start');
// Next slide
$('.slider').slider('next');
// Previous slide
$('.slider').slider('prev');