Как сделать такой слайдер?

Question

[Skilful221]

Хочу вот такой слайдер https://i.stack.imgur.com/VOkI0.png
Сейчас он выглядит вот так https://i.stack.imgur.com/ilBg5.jpg
не получается вывести квадратики, я их создал, задавал им position absolute and relative ничего не выходит, пробовал z-index 999 также не сработало, они как будто внутри слайдера

$(document).ready(function() {
  $('.slider').slick({
    dotsClass: ".slider__scroll",
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true,
    autoplay: false,
    autoplaySpeed: 3000,
    arrows: false
  });
});

<section class="hero">
    <div class="slider">
      <div class="slider__item">
        <img src="img/hero/phone-picture.png" class="slider__background" alt="background-hero">
      </div>
      <div class="slider__item">
        <img src="img/hero/repear.jpg" class="slider__background" alt="background-hero">
      </div>
      <div class="slider__item">
        <img src="img/hero/phone-picture.png" class="slider__background" alt="background-hero">
      </div>
      <div class="slider__item">
        <img src="img/hero/phone-picture.png" class="slider__background" alt="background-hero">
      </div>
    <!-- /.slider -->
    <div class="slider__scroll">
        <div class="quire_1">
          <img src="img/hero/quire_1.png" alt="quire">
        </div>
        <div class="quire_2">
          <img src="img/hero/quire_2.png" alt="quire">
        </div>
        <div class="quire_3">
          <img src="img/hero/quire_3.png" alt="quire">
        </div>
        <div class="quire_4">
          <img src="img/hero/quire_4.png" alt="quire">
        </div>
      </div>
  </section>

.slider
  padding: relative
  &__background
    background-color:rgba(0,0,0,.3)
  &__scroll
    position: absolute
    top: 50%
    transform: translateY(-50%)
    z-index: 9999
.quire
  &_1
    position: absolute
    bottom: 10px
  &_2
    position: absolute
    bottom: 10px
  &_3
    position: absolute
    bottom: 10px
  &_4
    position: absolute
    bottom: 10px