Слайдер с использованием CSS и JavaScript

Question

У меня есть этот слайдер, он работает.но мне нужно видеть стрелки под блоками, как на картинке.Как я могу это сделать?

На этом изображении стрелки под блоками.css:

body {
  margin: 0;
}

.slider {
  position: relative;
  overflow: hidden;
}

.slider__wrapper {
  display: flex;
  transition: transform 0.6s ease;
}

.slider__item {
  flex: 0 0 50%;
  max-width: 50%;
}

.slider__control {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  height: 50px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, .5);
}

.slider__control:hover,
.slider__control:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9;
}

.slider__control_left {
  left: 0;
}

.slider__control_right {
  right: 0;
}

.slider__control::before {
  content: '';
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}

.slider__control_left::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.slider__control_right::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.slider__item>div {
  line-height: 250px;
  font-size: 100px;
  text-align: center;
}

html:

  <div class="slider">
    <div class="slider__wrapper">
      <div class="slider__item">
        <div style="height: 250px; background: orange;">1</div>
      </div>
      <div class="slider__item">
        <div style="height: 250px; background: green;">2</div>
      </div>
      <div class="slider__item">
        <div style="height: 250px; background: violet;">3</div>
      </div>
      <div class="slider__item">
        <div style="height: 250px; background: coral;">4</div>
      </div>
    </div>
    <a class="slider__control slider__control_left" href="#" role="button"></a>
    <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>    
  </div>

Мне нужно видеть стрелки, как они есть на изображении, под моими блоками.Слайдер работает, я не буду добавлять js-код, я просто пытаюсь сделать css его часть.Помоги мне, если сможешь.

Answer 1

Оформить обновленную ручку здесь: https://codepen.io/thecenteno/pen/BbobGN

Я обновил немного CSS, но также было важно добавить обертку вокруг элементов управления, чтобы иметь больше контроля над ней.Наиболее важными элементами были:

/* Added: */

.slider__controls {
  display: flex;
  justify-content: center;
  flex-flow: row;
}
.slider__control {
  /* Added: */
  border-radius: 50%;

  /* Updated: */
  position: relative;
  top: 0;
  width: 50px;

  /* The Same: */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  height: 50px;
  background: rgba(0, 0, 0, .5);
  /*
    REMOVED: transform: translateY(-50%);
  */
}

С этой отправной точки вы можете добавить к нему различные стили.Flex отлично работает, когда целевые элементы имеют родительский div.