带轮播项目的材料盒答案

【问题标题】：Material Box with carousel-item带轮播项目的材料盒
【发布时间】：2021-02-02 16:31:04
【问题描述】：

我正在创建一个包含多个图像的网页。要存储图像，我使用以下代码。

<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img
                    src="some url"></a>
<a class="carousel-item" href="#one!"><img
                    src="some url"></a>
<a class="carousel-item" href="#one!"><img
                    src="some url"></a>
</div>

它工作正常。但是我想在单击后以全屏模式进行图像处理。出于这个原因，我尝试使用materialboxed，但它没有按预期工作并且是有线的。如果我添加 materialboxed 类 img 点击无法正常工作并且视图只是一种有线。有什么办法让它一起工作吗？

【问题讨论】：

标签： material-design materialize

【解决方案1】：

将属性 class="materialboxed" 添加到 img 标签。

  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
  </div>

稍后是否使用 jquery 依赖启动它

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

如果使用 jquery 方法，请务必先导入 jquery

【讨论】：