如何在滑块容器中居中放置图像

Question

我正在尝试使用Slick Slider和jQuery制作幻灯片。
我已经设置好HTML和CSS，但是我的图像没有停留在滑块容器中，并且当我单击滑动时一些图像消失了。

我试图在CSS代码上进行一些设置，但没有帮助。
关于上一个和下一个控件，我使用CSS来设置默认按钮的样式，并向其中添加了箭头。

$(document).ready(function() {

  $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 2,
    speed: 1000,
    fade: true,
    dots: false,
    arrows: true

  });

});

.slider {
  margin: 0 68px;
  width: inherit;
  overflow: hidden;
}

.slider div {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}

.slider div img:first-child {
  margin-right: 37px;
}

.phones {
  position: relative;
}

.slick-next {
  background: url("../images/l-arrow.png") no-repeat;
  position: absolute;
  cursor: pointer;
  font-size: 0;
  border: none;
  z-index: 1000;
  width: 17px;
  height: 28px;
  top: 209px;
  left: 0;
}

.slick-prev {
  background: url("../images/arrow-r.png")no-repeat;
  position: absolute;
  font-size: 0;
  border: none;
  cursor: pointer;
  width: 17px;
  height: 28px;
  right: 0;
  top: 209px;
}

.slick-next,
.slick-prev:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="banner">
  <div class="container">

    <div class="phones">

      <div class="slider">
        <div><img src="./images/v-phone.png"></div>
        <div><img src="./images/h-phone.png"></div>
        <div><img src="./images/v-phone.png"></div>
        <div><img src="./images/h-phone.png"></div>
      </div>

      <div class="slide-left"></div>
      <div class="slide-right"></div>

    </div>

  </div>
</div>