时间戳

首页 > 解决方案 > 幻灯片图像不显示为幻灯片，而是显示在彼此下方

html - 幻灯片图像不显示为幻灯片，而是显示在彼此下方

问题描述

大家好，希望您一切都好，我正在尝试制作幻灯片，它与 w3schools 上的示例类似，但我的却无法正常工作。

幻灯片需要进入“主”容器，并且与“主”容器的宽度和高度完全相同。

但是，将幻灯片放入容器中会造成一团糟，图像不会变成幻灯片，而是图像彼此下方显示，拉伸整个“主”容器并弄乱按钮容器和页脚容器。

我怎样才能解决这个问题？我几乎直接遵循 w3schools 示例只是为了让它工作，但我只是把它搞砸了。如果能得到任何帮助，我将不胜感激，谢谢。

CSS代码：

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

<div class="slider-container fade">
  <div class="slider-images">
    <img src="images/marsrover.jpg" style="width:100%">
    <div class="text">Visit the original Mars rover landing sites!</div>
  </div>
  <div class="slider-images fade">
    <img src="images/sandboarding.jpg" style="width:100%">
    <div class="text">Go sandboarding on the Martian dunes!</div>
  </div>
  <div class="slider-images fade">
    <img src="images/luxurymall.jpg" style="width:100%">
    <div class="text">Explore thousands of unique Martian crafted luxuries</div>
  </div>
  <div class="slider-images fade">
    <img src="images/nightskydesert.jpg" style="width:100%">
    <div class="text">Stargaze with a light pollution free sky!</div>
  </div>
  <div class="slider-images fade">
    <img src="images/sandbuggy.jpg" style="width:100%">
    <div class="text">Ride sandbuggy's across the martian surface!</div>
  </div>

.slider-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide-images {
  display: none;
}

.text {
  font-family: 'Montserrat', cursive, sans-serif;
  font-size: 15px;
  text-align: center;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

这是它的样子，“主”容器是幻灯片应该适合的位置，幻灯片应该与容器的大小完全相同：

https://jsfiddle.net/voltaicseas/sfbu7z10/1/

<!doctype html>


  <div class="item3">main</div>

这是我所做的，我尝试将代码放入作为“主要”容器的“Item3”（黄色引导我），因为您可以看到它完全弄乱了页面的布局并且图像没有甚至显示为幻灯片，而只是出现在另一个下方。

https://jsfiddle.net/voltaicseas/ah4oznLp/

  <div class="item3">
    <div class="slider-container fade">
      <div class="slider-container fade">
        <div class="slider-images">
          <img src="images/marsrover.jpg" style="width:100%">
          <div class="text">Visit the original Mars rover landing sites!</div>
        </div>
        <div class="slider-images fade">
          <img src="images/sandboarding.jpg" style="width:100%">
          <div class="text">Go sandboarding on the Martian dunes!</div>
        </div>
        <div class="slider-images fade">
          <img src="images/luxurymall.jpg" style="width:100%">
          <div class="text">Explore thousands of unique Martian crafted luxuries</div>
        </div>
        <div class="slider-images fade">
          <img src="images/nightskydesert.jpg" style="width:100%">
          <div class="text">Stargaze with a light pollution free sky!</div>
        </div>
        <div class="slider-images fade">
          <img src="images/sandbuggy.jpg" style="width:100%">
          <div class="text">Ride sandbuggy's across the martian surface!</div>
        </div>
  </div>

标签： htmlcss

解决方案

推荐阅读