Проблема со слайдером на iOS устройствах

202

13 мая 2018, 07:30

На сайте cookeryschool.com.ua (сайт на вордпрессе) есть слайдер с курсами(сделан с помощью bx-slider), на разных по ширине экранах слайдер отображается по разному (4 в ряд, 3 в ряд, 2 в ряд и на смартфонах 1 в ряд). Как только заходишь на сайт с любого айфона и листаешь вниз к этому слайдеру, то слайдер отображается вот так:

Но если нажать на стрелку вправо или влево, то все становится на свои места:

Так должно быть:

Данная проблема наблюдается только на яблочных смартфонах, на андроидах данного бага не обнаружено, подскажите как решить?

Answer 1

Судя по всему ломается вёрстка, но так как я не вижу кода, советую использовать следующий код для слайдера:

.wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
} 
 
.slide { 
  display: block; 
  height: 150px; 
  width: 150px; 
  margin: 15px; 
  background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; 
}

<div class='wrapper'> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
  <div class="slide"></div> 
</div>