如何将 materialboxed 与 materialize carousell 结合使用？

Question

我之前尝试过使用 materialboxed 制作卡片图片，效果很好。

但是当我用materialboxed做轮播图的时候结果不一样，不如卡片图

固定的导航栏和下面的任何元素也与卡片图像不同，周围的所有元素都是不可见的。

我已经尝试从实体化中编辑 css 但还是不行。

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

the result image materialboxed in carousel

Answer 1

您写道：

The navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.

这是否意味着当您在 carousel 中使用带有 img 标签的 class materialboxed 时，页面的其余部分不会变成 invisible/blacked-out 当你点击图片时?

也许您的文档中有更多您没有共享的代码？

我能够使用这段代码在您的轮播中实现 materialboxed 效果：

<!DOCTYPE html>
<html>
  <head>

    <!-- IMPORT MATERIALIZE CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  </head>

  <body>

    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
      </div>
    </nav>

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

    <!-- IMPORT MATERIALIZE JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- INIT CAROUSEL -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
          var elems = document.querySelectorAll('.carousel');
          var instances = M.Carousel.init(elems);
      });
    </script>

    <!-- INIT MATERIALBOXED -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
          var elems = document.querySelectorAll('.materialboxed');
          var instances = M.Materialbox.init(elems);
      });
    </script>
    
  </body>
</html>

查看 screen grab 结果。

编辑 2020-10-23：

以下几个假设：

materialize.js 现在是 html 文件的本地文件，而不是从 CDN 导入。此外，<nav> 标签现在包含在 div 中，其中 class="navbar-fixed" 和 id="fixed-nav":

<div id="fixed-nav" class="navbar-fixed">
    <nav>
        {...}
    </nav>
</div>

在评论中，OP 澄清说他不喜欢使用 materialboxed + carousel + navbar-fixed.

时的行为

一个解决方案是在打开轮播图片时从 <nav> 的包装器 div 中删除 class navbar-fixed 并在关闭时将其添加回去。

materialize.js的第3590行和第3722行分别是打开和关闭带有classmaterialboxed的图像的函数。在这些函数中，您可以将以下内容从您的包装器中添加到 remove/add navbar-fixed，ID 为 fixed-nav:

open() 函数内部：

// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')

close() 函数内部：

// add navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.add('navbar-fixed')

如何将 materialboxed 与 materialize carousell 结合使用？

How to combine materialboxed with materialize carousell?

html

css

frameworks

carousel

materialize