Materialise - 全屏滑块和导航栏

Question

在项目开发过程中，我决定使用全屏图像滑块。如官网所示：Link

这样导航栏就消失了，但是在 Youtube 视频上我看到有一种方法（我不知道）可以同时保持全屏滑块和导航栏。谁能帮我解决这个问题？有没有办法同时使用这两个功能？谢谢

代码如下：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="./script.js"></script>
    <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
        <script src="./src/jquery.js"></script>
        <script src="./src/js.js"></script>
        <title>Home Automation - Test</title>
        <meta charset="utf-8" lang="it">
        <link rel="stylesheet" href="./css/mycss.css">
    </head>

<body class="bkground">
    <nav class="teal darken-1">
        <div class="nav-wrapper">
            <a href="#" class="brand-logo right">Domotic Home</a>
            <ul id="nav-mobile" class="left hide-on-med-and-down">
                <li class="active"><a href="index.html">General</a></li>
                <li><a href="homecontrol1.html">Home Control - First floor</a></li>
                <li><a href="homecontrol2.html">Home Control - Second floor</a></li>
                <li><a href="privatearea.html">Private Area</a></li>
            </ul>
        </div>
    </nav>
    <br>
    <br>
    <div class="slider fullscreen">
        <div class="main-content">
            <ul class="slides">
                <li>
                    <img src="./img/1.jpg">
                </li>
                <li>
                    <img src="./img/5.jpg">
                </li>
                <li>
                    <img src="./img/3.jpg">
                </li>
                <li>
                    <img src="./img/6.jpg">
                </li>
                <li>
                    <img src="./img/7.jpg">
                </li>
                <li>
                    <img src="./img/9.jpg">
                </li>
                <li>
                    <img src="./img/11.jpg">
                </li>
                <li>
                    <img src="./img/12.jpg">
                </li>
                <li>
                    <img src="./img/13.jpg">
                </li>
                <li>
                    <img src="./img/14.jpg">
                </li>
                <li>
                    <img src="./img/15.jpg">
                </li>
                <li>
                    <img src="./img/16.jpg">
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

这里是 css

.modal {
    max-height: 90%;
    max-width: 90%;
}
.bkground {
    background-image: url("/img/Sfondo3.jpg")
}
.sliderimg {
    border-color: black;
    border: solid 2px;
}
.floorimg {
    border-color: black;
    border: solid 4px;
}
.main-content {
    top: 100%;
    position: absolute;
    width: 100%;
}

Answer 1

是的。可以 done.I 在 div.slider.fullscreen 之后添加一个 div.main 内容，如下所示：

div.main-content {
            top: 100%;
            position: absolute;
            width: 100%;
        }

它对我有用。只需在 div.main-content 元素

中添加任何你想要的内容

Answer 2

我找到了答案

CSS

.slider-adjustment{
 position: fixed;
  top: 56px;  <!-- as nav bar has height of 56px -->
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
background-color:cyan ;

}

HTML

 <div class="slider-adjustment">
     <!-- All html for slider goes here -->
 </div>

Answer 3

你试过增加 z-index

nav{
  z-index:100;
}

Answer 4

您可以将全屏滑块后的所有内容包装在 div 中（比如使用 id 内容）并设置 CSS 如下：

#content {
position: relative;
top : 100vh;
}

学分：https://github.com/anshap1719

Materialise - 全屏滑块和导航栏

Materialize - Full screen slider and navigation bar

slider

fullscreen

navbar

materialize