Question

大家好，希望您一切都好，我正在尝试制作一张幻灯片，它实际上与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>

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

0 个答案: