居中脚本稍微偏离中心

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/