центральный дочерний элемент, соответственно отрегулируйте родителя

Question

У меня есть, что важно, слайдер изображений.У меня есть список изображений:

 <div class="container">
      <img src=""/>
      <img src=""/>
      <img src=""/>
      <img src=""/ class="middle">
      <img src=""/>
      <img src=""/>
      <img src=""/>
      <img src=""/>
 </div>

Влево-вправо

Цель: Когда пользователь нажимает вправо или влево, я переместлю первое или последнее изображение на другой конецстроки, переместите class = "middle" к следующему изображению (в зависимости от того, какая кнопка нажата), а затем анимируйте так, чтобы .middle переместился обратно в центр экрана.Проблема в том, что я не знаю, возможно ли (используя jquery) центрировать дочерний элемент, а затем соответствующим образом настроить все остальные дочерние и родительские элементы.Мысли?Спасибо!

Answer 1

Попробуйте что-то вроде этого:

var $imgmiddle = $('img.middle');
var imgwidth = $imgmiddle.width();
var docwidth = $(document).width();
var newleft = docwidth/2 - imgwidth/2;
var imgleft = $imgmiddle.position().left;  // position inside container
$('div.container').offset({left: (newleft-imgleft)});