Question

我试图在我的ejs模板中放置一个全屏图像滑块，但是它不起作用。图像只是没有显示出来。我试图将代码重写为一个普通的html文件，它的工作没有问题。在ejs文件中做错了。我确保图像也要在本地主机上上传，所以这不是问题。

我的ejs模板中的代码

<link rel="stylesheet" type="stylesheet" href="../sass/main.css">
</head>
<body>
  <!-- Navigation -->
  <nav id="mainNav" class=" navbar navbar-light navbar-expand-lg text-uppercase ">
    <div class="container">
      <span class="navbar-brand">
      <img src="/img/fell.jpg" alt="logo">
      </span>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav nav-fill w-100 align-items-start">
          <li class="nav-item">
            <a href="" class="nav-link">what we do</a>
          </li>
          <li class="nav-item">
            <a href="/testimonials" class="nav-link">testimonials</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link main" href="/index">one fell swoop</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/the-team">the team</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link">development / opportunities</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!--- Image Slider -->
  <div id="container">
    <div class="slide show" style="background: url('/img/img1.jpg');"></div>
    <div class="slide" style="background: url('/img/img2.jpg');"></div>
    <div class="slide" style="background: url('/img/img3.jpg');"></div>
  </div>
  <script>
    function cycleBackgrounds() {
        var index = 0;

        $imageEls = $('#container .slide'); // Get the images to be cycled.

        setInterval(function () {
            // Get the next index.  If at end, restart to the beginning.
            index = index + 1 < $imageEls.length ? index + 1 : 0;

            // Show the next
            $imageEls.eq(index).addClass('show');

            // Hide the previous
            $imageEls.eq(index - 1).removeClass('show');
        }, 2000);
    };

    // Document Ready.
    $(function () {
        cycleBackgrounds();
    });
  </script>
  <hr>
  <!--- Footer -->
  <div class="footer row text-center justify-content-center ">
    <div class="col-xs-12 col-sm-6 col-md-2 thumbnail">
      <img src="/img/media_access.gif">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
      <img src="/img/hootlogo_Web.png">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
      <img src="/img/hootsuite-official.png">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-2">
      <img src="/img/cla bigcolour300dpi.jpg">
    </div>
  </div>

我的CSS文件中的代码

    #container {
  width: 100%;
  height: 100%;
  position: relative;
}

#container .slide {
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  transition: opacity 1s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

#container .slide.show {
  opacity: 1;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

nav {
  position: absolute;
  z-index: 2;
  font-weight: 500;
  font-size: 1.1rem;
  background-color: white;
  color: #eeeeee;
  font-family: 'Baloo Chettan', cursive;
}

.nav-link:hover {
  color: #dfbf9f !important;
}

#mainNav .main {
  color: #c68c53;
}

#carousel h3 {
  color: #c68c53;
}

.navbar {
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 1em !important;
}

我不知道出了什么问题。.正如我说的，我尝试将相同的.ejs文件转换为html并成功运行。请帮助：D

编辑：我现在看到，当jquery代码应用“ show”类时，Chrome控制台的“样式”选项卡中没有任何变化。我也看不到从Slide类应用于div的任何样式。包含图像

EDIT2：即使在将css手动添加到每个div之后，图像仍然没有显示。

已解决：我使用了引导传送带并使其全屏显示，这解决了我的问题。所以我说问题出在CSS上。

背景图像滑块未显示

0 个答案: