Как правильно выставить позицию стрелкам в слайд шоу Slick?

Подскажите как правильно выставить позицию стрелкам + как сделать чтобы они были поверх картинок на слайд шоу?

.photo__slider {
  width: 640px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slick-arrow {
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.slick-prev{
  left: -30px;
}

.slick-next{
  right: 30px;
}

$(function(){
    
 $('.photo__slider').slick({
     prevArrow: '<button type="button" class="slick-prev"><img src="img/left.svg" alt=""></button>',
     nextArrow: '<button type="button" class="slick-next"><img src="img/right.svg" alt=""></button>'
 });

});