javascript - 居中脚本稍微偏离中心

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