получать точки слайд-шоу, чтобы просто остаться на месте - PullRequest
Новая
       10

получать точки слайд-шоу, чтобы просто остаться на месте

0 голосов
/ 03 марта 2019

Я делаю слайд-шоу и имею маленькие маленькие точки внизу, чтобы показать, на какой фотографии вы сейчас находитесь.Тем не менее, я не могу заставить маленькие точки оставаться на одном месте, они переключаются с каждой картинкой.Я пытался сделать это отдельным div.фиксированное положение и т. д., но тогда они не центрируются, или нижний колонтитул, но тогда высота страницы становится слишком большой?Я делаю что-то не так, но я не знаю что!

example

example2

Вот немного моего кода: 

.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>

1 Ответ

0 голосов
/ 03 марта 2019

Возможно, вы захотите дать height .mySlides

...