Html 如何将物料装箱与物化转盘相结合？_Html_Css_Frameworks_Carousel_Materialize

Html 如何将物料装箱与物化转盘相结合？

html css frameworks

Html 如何将物料装箱与物化转盘相结合？,html,css,frameworks,carousel,materialize,Html,Css,Frameworks,Carousel,Materialize,我以前试过使用materialboxed制作卡片图像，效果很好但是，当我使用materialboxed处理旋转木马图像时，结果是不同的，不如卡片图像好固定导航栏和下面的任何元素看起来也与卡片图像不同，因为卡片图像周围的所有元素都不可见我试图从materialize编辑css，但仍然无法您写道：导航栏和下面的任何元素看起来也与卡片图像不同，因为卡片图像周围的所有元素都不可见这是否意味着当您在carousel中使用带有img标记的类materialboxed时，当您单击图像时，页面的

我以前试过使用materialboxed制作卡片图像，效果很好

但是，当我使用materialboxed处理旋转木马图像时，结果是不同的，不如卡片图像好

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

我试图从materialize编辑css，但仍然无法

您写道：

导航栏和下面的任何元素看起来也与卡片图像不同，因为卡片图像周围的所有元素都不可见

这是否意味着当您在

carousel

中使用带有

img

标记的类

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>

在评论中，OP澄清说，他不喜欢使用

materialboxed

carousel

navbar fixed

时的行为

一种解决方案是在打开旋转木马图像时从

的包装器div中删除类

navbar fixed

，并在关闭时将其添加回

在

materialize.js的第3590行和第3722行，分别是打开和关闭类为materialboxed
的图像的函数。在这些函数中，您可以添加以下内容，以便从id为fixed nav的包装中删除/添加navbar fixed
：
<div id="fixed-nav" class="navbar-fixed">
    <nav>
        {...}
    </nav>
</div>

在open（）函数中：
// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')

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

在close（）函数中：
// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')

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

抱歉，我忘了说它发生在fixed navbar中，而不是在普通navbar中。请尝试提供fixed navbar类，看看如果单击carousel image会发生什么，结果就像我之前所说的，我可以复制您描述的行为。我用一个解决方案编辑了我的答案，该解决方案可以在没有固定导航的情况下打开图像，并在关闭图像时重新激活固定导航。我不建议对materialize.js进行大量修改，但这样做相对容易，因为许多事件侦听器都封装在我在编辑中描述的open（）
和close（）
函数中。对耽搁表示歉意。