左右浮动箭头

Question

我在创建一个视图时遇到问题，该视图的图像水平堆叠，小箭头在 div 的左侧和右侧垂直居中，其中包含用于滚动视图的图像。

箭头最终相对于页面居中，而不是中心图像部分。

我试图让它看起来像这样： http://www.vanleeuwenicecream.com/

如果可能的话，我希望左右箭头只用 CSS/HTML 定位。

这是我目前的情况： https://github.com/thorkia/cssPositioningIssue

如有任何帮助，我们将不胜感激

注：

我可以通过使用 js 更改包含图像的 div 的左边距来使视图滚动良好。我删除了样本。我只需要正确定位箭头

Answer 1

.imagesContainer {
  width: 100%;
  height: 500px;
  position: relative;
  background: red;
}

.imageScrollers .imageScrollBack img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 20px;
}

.imageScrollers .imageScrollNext img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 20px;
}

<div class="imagesContainer">

  <div class="imageScrollers">
    <span class="imageScrollBack"><img src="dawdaw" alt=""></span>
    <span class="imageScrollNext"><img src="dawdaw" alt=""></span>
  </div>
</div>

左右浮动箭头

Floating Left and Right Arrows

html

css

bootstrap-4