Как исправить режущие элементы слайдера, когда переменная ширина включена [скользящий слайдер]? - PullRequest
Новая
       79

Как исправить режущие элементы слайдера, когда переменная ширина включена [скользящий слайдер]?

0 голосов
/ 17 февраля 2020

Извините за отсутствие фрагмента кода или JS скрипта, но я провел с ним час и все еще имел проблемы с скользящим слайдером.

У меня проблема с скользящим слайдером и настройкой переменной ширины. Мне нужно varableWidth для отображения переменного количества элементов на переменной ширине экрана (и переменной ширине элементов): если элементы будут длинными, отображать только 3, если элементы будут короткими, отображать 5. Поэтому я использую variableWith, но У меня все еще есть проблема с его центрированием. Ниже я показываю 5 поведений слайдера. Если на контейнере слайдера осталось много свободного места, второй корпус: с правой стороны, в четвертом и пятом корпусах элементы неравномерно обрезаны по бокам контейнера слайдера. Раз они шире, иногда уже. Кто-нибудь может мне помочь? Заранее спасибо.

enter image description here enter image description here enter image description here enter image description here enter image description here

(function($){
      $('.block-slider .icons-wrapper').slick({ 
        arrows: false,
        infinite: true,
        slidesToShow: 1, 
        centerMode: true,
        variableWidth: true
      });
}(jQuery))  

.block-slider {
    text-align: center;
}

.block-content {
  background-color: lightgreen;
}

.icons-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.block-item {
  padding: 50px 70px 10px;
}

img {
  margin: 0 auto;
  max-width: 100px;
  height: auto;
}

<section class="block-slider">
  <div class="block-content">
    <div class="icons-wrapper">
        <div class="block-item">
          <img src="https://www.liberaldictionary.com/wp-content/uploads/2019/01/example-1.jpg"/>
        </div>
        <div class="block-item">
          <img src="https://as1.ftcdn.net/jpg/00/92/53/56/1000_F_92535664_IvFsQeHjBzfE6sD4VHdO8u5OHUSc6yHF.jpg"/>
        </div>
        <div class="block-item">
          <img src="https://media.istockphoto.com/vectors/example-blue-grunge-round-vintage-rubber-stamp-vector-id654913210"/>
        </div>
        <div class="block-item">
          <img src="https://as1.ftcdn.net/jpg/00/92/53/56/1000_F_92535664_IvFsQeHjBzfE6sD4VHdO8u5OHUSc6yHF.jpg"/>
        </div>
    </div>
  </div>
</section>
...