html - 幻灯片框内的图像定位

Question

我创建了一个包含图像的框，但我想做的是:

内联显示图像或将它们放置在彼此之上，然后使用 JQuery 在它们之间导航。

我已经在 .box 和 .box img 以及 display: inline 上尝试了绝对定位，但它们弄乱了代码.

到这里为止:

.box {
    position: absolute;
    left: 10%;
    width: 80%;
    border: 10px solid white;
    border-radius: 10px;
    box-shadow: 0 0 4px black;
  }

  .box img {
    width: 100%;
  }

  .prev, .next {
    border: 1px solid black;
    padding: 5px;
  }

  .prev:Hover, .next:Hover {
    background-color: red;
    color: white;
    text-decoration: none;
  }

<div class="container-fluid">
<h1>Welcome Within</h1>
	<div class="box">
	  <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
		<img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
		<img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
    <br /></br />
    <a href="#" class="prev">PREVIOUS</a>
    &nbsp;
    <a href="#" class="next">NEXT</a>
	</div>
  </div>

Answer 1

试试这个:

.box {
  position: absolute;
  left: 10%;
  width: 80%;
  border: 10px solid white;
  border-radius: 10px;
  box-shadow: 0 0 4px black;
  height: 300px;
  overflow: hidden;
  margin-bottom: 10px;
}

.caption {
  position: absolute;
  top: 10px;
  color: red;
  font-size: 20px;
  background: #fff;
  left: 30%;
}

.box img {
  width: 100%;
}

.prev,
.next {
  border: 1px solid black;
  padding: 5px;
}

.prev:Hover,
.next:Hover {
  background-color: red;
  color: white;
  text-decoration: none;
}

<div class="container-fluid">
  <h1>Welcome Within</h1>
  <div class="slider">
    <a href="#" class="prev">PREVIOUS</a>
    <a href="#" class="next">NEXT</a>
    <div class="box">
      <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" />
      <p class="caption">Caption1</p>
    </div>
    <div class="box">
      <img src="https://www.gamewallpapers.com/img_script/mobile_dir2/img.php?src=wallpaper_prince_of_persia_warrior_within_18_ipad.jpg&height=755&width=850&crop-to-fit" />
      <p class="caption">Caption2</p>
    </div>
    <div class="box">
      <img src="https://r.mprd.se/media/images/66295-Prince_Of_Persia_Warrior_Within_READNFO-4.jpg" />
      <p class="caption">Caption3</p>
    </div>
  </div>
</div>