getting slideshow dots to just stay in the same place

问题: I'm making a slideshow and having small little dots underneath to show what photo you're at right now. However, I can't seem to get the little dots to stay in the same plac...

问题:

I'm making a slideshow and having small little dots underneath to show what photo you're at right now. However, I can't seem to get the little dots to stay in the same place, they switch with every picture. I've tried making it a seperate div. fixed position etc but then they don't center, or a footer but then the page height gets too long? I'm doing something wrong but I do not know what!

example

example2

Here's a bit of my code:

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

You might want to give a height to .mySlides

  • 发表于 2019-03-06 02:31
  • 阅读 ( 186 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除