Белый зазор на стороне страницы в мобильном

Question

У меня есть сайт с каруселью slick.js в нем. Я заметил белый промежуток на стороне страницы, когда веб-сайт просматривается на устройствах с экранами размером менее 770 пикселей.

После некоторого тестирования я заметил, что если я удалю slick.js с веб-сайта, белый зазор исчезает.
Сначала я думал, что содержание слайдов вызывает его, но я уменьшил каждый слайд всего на пару слов, и есть еще белый пробел.

Вот HTML:

<div class="m-carousel" dir="rtl"> 
    <div class="slide">Test Slide</div> 
    <div class="slide">Test Slide</div> 
    <div class="slide">Test Slide</div> 
    <div class="slide">Test Slide</div> 
</div> 

И Javascript (после загрузки страницы):

$('.m-carousel').slick({ 
    dots: true, 
    rtl: true 
}); 

CSS-(относительно ползуна):

// slick slider styling 
.slick-dots li button:before { 
    font-size: 9px; 
} 

.slick-dots li.slick-active button:before { 
    color: accent; 
} 

На мобильных устройствах, то страница перемещается из стороны в сторону (когда это не так), раскрывая и скрывая этот пробел. Это очень раздражает.

Я попытался установить overflow-x: hidden на тело, но это вызывает множество проблем с навигацией и общей прокруткой веб-сайта.

Answer 1

Мне потребовалось много времени, чтобы понять это, но я, наконец, сделал.
Проблема была в стрелках. Кажется, что когда вы ставите бутстрап и slick.js вместе, на ширине экрана ниже 767 пикселей, нет стрелок, и есть белый необъяснимый пробел.

Чтобы решить эту проблему, все, что я должен был сделать отключить стрелки в JavaScript:

$('.m-carousel').slick({ 
    arrows: false 
}); 

Вы можете посмотреть демо, показывающее белый зазор here.

Большое спасибо NominalAeon за постоянную помощь и поддержку.

Answer 2

Я думаю, что ваша проблема переполнена. Возможно, вы смогли сохранить свои стрелки и сменить переполнение на скрытое.