获得幻灯片点以保持在同一个地方

Question

我正在制作幻灯片，并在下方放置一些小点，以显示您现在正在拍摄的照片。然而，我似乎无法将小点留在同一个地方，它们随着每张照片切换。我试过让它成为一个单独的div。固定位置等，但然后他们不居中，或页脚但页面高度太长？我做错了什么，但我不知道是什么！

这是我的一些代码：

.menu {
  width: 10%;
}

.main {
  height: 100vh;
  max-width: 100%;
  width: 90%;
  display: inline-block;
  float: right;
  padding: 20px;
  margin-top: 0%;
}

* {
  box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  top: 19%;
}


/* Hide thimages by default */

.mySlides {
  margin: 0px auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  margin-bottom: 100px;
}

.dots {
  margin-right: 50px;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 3px;
  background-color: #DBC6D7;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #FF0004;
}

<!-- Slideshow container -->
<main>
  <div class="main">
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text -->
      <div class="mySlides fade">
        <img src="3D/plant2.jpg" alt="House plant cactus" onMouseOver="this.src='3D/PLANT2.GIF'" onMouseOut="this.src='3D/plant2.jpg'" class="ogen">
      </div>

      <div class="mySlides fade">
        <img src="3D/plant1.jpg" onMouseOver="this.src='3D/plant1.GIF'" onMouseOut="this.src='3D/plant1.jpg'" alt="house plant" class="ogen">
      </div>

      <div class="mySlides fade">
        <img src="3D/plant3.jpg" onMouseOver="this.src='3D/plant3.GIF'" onMouseOut="this.src='3D/plant3.jpg'" alt="house plant aloe vera" class="ogen">
      </div>

      <div class="mySlides fade">
        <img src="3D/raam.jpg" onMouseOver="this.src='3D/raam2.jpg'" onMouseOut="this.src='3D/raam.jpg'" alt="window painted" class="window">
      </div>

      <div class="mySlides fade">
        <img src="3D/phone.jpg" onMouseOver="this.src='3D/phone2.jpg'" onMouseOut="this.src='3D/phone.jpg'" alt="phone" class="phone">
      </div>

      <!-- The dots/circles -->
      <div class="dots" style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        <span class="dot" onclick="currentSlide(4)"></span>
        <span class="dot" onclick="currentSlide(5)"></span>
        <span class="dot" onclick="currentSlide(6)"></span>
      </div>

      <!-- Next and previous buttons -->
      <a onclick="plusSlides(-1)"> <img src="text/leftarrow_1.png" class="prev" alt="previous" /> </a>
      <a onclick="plusSlides(1)"><img src="text/rightarrow.png" class="next" alt="next" /></a>
    </div>
    <br>

  </div>
</main>

Answer 1

你可能想给height一个.mySlides