Как я могу центрировать мои изображения в контейнере слайдера - PullRequest
Новая
       7

Как я могу центрировать мои изображения в контейнере слайдера

0 голосов
/ 06 января 2019

Я пытаюсь сделать слайд с помощью Slick Slider с jQuery.
Я настроил HTML и CSS, но мои изображения не остаются в контейнере слайдера, и некоторые изображения исчезают, когда я нажимаю на слайд.

Я попытался настроить некоторые параметры в коде CSS, но это не помогло.
Что касается элементов управления prev и next, я использовал 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>
...