居中腳本稍微偏離中心

Question

我想保持一個「幻燈片」在我的可滾動div中心在任何時候。由於某種原因，腳本似乎將其設置爲偏離中心，我無法弄清楚原因。下面是代碼：

http://jsfiddle.net/5cp0unwj/

HTML：

<div id="carousel"> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div> 
</div> 

的JavaScript（jQuery的）：

$(document).ready(function() { 
    // setup handlers 
    var carouselTimeout = null; 
    var scrollStop = function() { 
    var carousel = $('#carousel'); 

    var carouselWidth = carousel.width(); 
    var slideWidth = carousel.find('.slide:first-child').width(); 
    var margin = carouselWidth/20; // assumes margin of 5% on slides 
    var snapVal = slideWidth/2 + margin; 

    var offset = carousel.scrollLeft(); 
    slideNum = Math.round(offset/snapVal/2); 
    var newOffset = slideNum * snapVal * 2; 
    carousel.animate({ 
     scrollLeft: newOffset 
    }); 
    }; 
    $('#carousel').scroll(function() { 
    if (carouselTimeout) { 
     clearTimeout(carouselTimeout); 
    } 
    carouselTimeout = setTimeout(scrollStop, 500); 
    }); 
}); 

CSS：

#carousel { 
    width: 100%; 
    height: 150px; 
    background-color: rgba(0, 0, 0, 0.3); 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

#carousel .slide { 
    display: inline-block; 
    margin: 0 5%; 
} 

#carousel .slide:first-child { 
    margin: 0 5% 0 calc(50% - 150px); 
} 

#carousel .slide:last-child { 
    margin: 0 calc(50% - 150px) 0 5%; 
} 

Answer 1

行內元素對代碼中的空白區域很敏感。刪除空格出現來解決問題：

<div id="carousel"> 
    <div class="slide"><img src="http://placehold.it/300x150"/></div><div class="slide"><img src="http://placehold.it/300x150"/></div><div class="slide"><img src="http://placehold.it/300x150"/></div><div class="slide"><img src="http://placehold.it/300x150"/></div><div class="slide"><img src="http://placehold.it/300x150"/></div><div class="slide"><img src="http://placehold.it/300x150"/></div> 
</div> 

jsFiddle example

Answer 2

的inline-block元素對它們的兩側空白。

有幾種方法可以刪除空間，例如在#carousel元素上設置font-size: 0;。 http://jsfiddle.net/5cp0unwj/3/

參考https://css-tricks.com/fighting-the-space-between-inline-block-elements/

一個更好的解決辦法可能是使用flexboxhttp://jsfiddle.net/5cp0unwj/6/