CSS левое позиционирование неточно

Question

Я создаю многоэкранную функцию jQuery, которая по существу представляет собой слайд-шоу с содержимым на каждом слайде. Слайды позиционируются inline-block и перемещаются с использованием свойства css слева. Однако позиционирование является неточным и заставляет слайды градомерно смещаться из положения при перемещении по ним. Я удалил анимацию, чтобы показать сдвиг немного более четко. Смотрите здесь:

var curr = 0; 

$('.next').on('click', function(){ 
    curr++; 
    $('.items').css('left', (curr*-140) + 'px') 
}) 

$('.back').on('click', function(){ 
    curr--; 
    $('.items').css('left', (curr*-140) + 'px') 
}) 

http://jsfiddle.net/S8pdH/1/

Любая помощь будет высоко ценится!

Answer 1

Вы перемещаете элементы, оставшиеся на величину ширины элементов, но игнорируете пространство между элементами.

Расстояние между элементами составляет 4 пикселя в ширину, и я изменил его на your fiddle here.

В принципе, вам просто нужно найти ширину элементов и расстояние и переместить div на эту сумму.

$('.next').on('click', function(){ 
    var distanceBetweenDivs = ($($(".item")[1]).offset().left - ($($(".item")[0]).offset().left)); //144 

    curr++; 
    $('.items').css('left', (curr*-distanceBetweenDivs)+ 'px') 
}) 

$('.back').on('click', function(){ 
    var distanceBetweenDivs = ($($(".item")[1]).offset().left - ($($(".item")[0]).offset().left)); //144 

    curr--; 
    $('.items').css('left', (curr*-distanceBetweenDivs) + 'px') 
}) 

(Edit:. Если у вас всегда есть один и тот же интервал между .item элементами, и вы хотите, чтобы не использовать статическое изменение позиции, вы можете найти точное различие между ними делать, как я показал в this updated JSFiddle)

Answer 2

Если в документе HTML есть какое-либо место между тегами открытия и закрытия div (слайды), и они расположены inline-block, между ними будет отображаться свободное место на веб-странице.

Решение: удалить пробельные между тегами

<div class="item"> 
... 
</div><div class="item"> <!-- no space between closing and opening tag --> 
... 
</div> 

Another, ИМХО менее элегантное решение установить font-size: 0 для родителя, а затем сбросить его для одного элемента

.items { 
    font-size: 0; 
} 
.items .item { 
    font-size: 16px; /* or whatever you want */ 
}