将幻灯片的点留在同一位置

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