頁面移動中的白色差距

我有一個網站，其中有一個slick.js旋轉木馬。當在屏幕小於770像素的設備上查看網站時，我注意到網頁側面有白色空白。頁面移動中的白色差距

The white gap is on the right side.

一些測試後，我發現，如果我從網站上刪除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設置爲正文，但導致導航和網站整體滾動出現許多問題。

來源

2015-05-22 Gofilord

你可以添加你的css嗎？甚至建立一個codepen或小提琴？ – NominalAeon

@NominalAeon我添加了CSS樣式化滑塊。我不認爲小提琴會在這裏很好地演示這個問題，但我會嘗試。 – Gofilord

不，這沒關係我只是想要CSS，但我希望你在使用更多的東西。您沒有將任何樣式應用於您滑動的容器？ – NominalAeon

我花了很多時間弄清楚，但我終於做到了。
問題是箭頭。它看起來像當你把bootstrap和slick.js放在一起時，在767px以下的屏幕寬度上，沒有箭頭，並且有一個白色的無法解釋的間隙。

要解決這個問題，所有我所要做的就是在JavaScript禁用箭頭：

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

你可以看到一個顯示白色的差距here演示。

非常感謝NominalAeon提供的持續幫助和支持。

來源

2015-05-28 09:35:51 Gofilord

呃。很高興你明白了，很沮喪，我沒有想到這一點。感謝您的跟蹤！ – NominalAeon

@gofilord謝謝你的回答，我保存了很多小時。 – nrvnm

我認爲你的問題溢出了。你可能已經能夠保持你的箭頭並將溢出變爲隱藏。

來源

2016-07-24 03:28:32

頁面移動中的白色差距

回答

相關問題