如何在图像中心同时设置图像？

Question

我正在尝试使用3D图像轮播。但是当出现奇数图像时，它可以正常工作。但是，当我添加一个图像，然后甚至在图像位置发生变化时，它也不是从中心移到左侧。

这是jsfiddle链接： https://jsfiddle.net/nriddhi/bp45zkun/

Js代码：

jQuerynum = jQuery('.my-image-3d').length;
jQueryeven = jQuerynum / 2;
jQueryodd = (jQuerynum + 1) / 2;

if (jQuerynum % 2 == 0) {
  jQuery('.my-image-3d:nth-child(' + jQueryeven + ')').addClass('active');
  jQuery('.my-image-3d:nth-child(' + jQueryeven + ')').prev().addClass('prev');
  jQuery('.my-image-3d:nth-child(' + jQueryeven + ')').next().addClass('next');
} else {
  jQuery('.my-image-3d:nth-child(' + jQueryodd + ')').addClass('active');
  jQuery('.my-image-3d:nth-child(' + jQueryodd + ')').prev().addClass('prev');
  jQuery('.my-image-3d:nth-child(' + jQueryodd + ')').next().addClass('next');
}

jQuery('.my-image-3d').click(function() {
  jQueryslide = jQuery('.active').width();
  console.log(jQuery('.active').position().left);

  if (jQuery(this).hasClass('next')) {
    jQuery('.image-3d-carousel').stop(false, true).animate({left: '-=' + jQueryslide});
  } else if (jQuery(this).hasClass('prev')) {
    jQuery('.image-3d-carousel').stop(false, true).animate({left: '+=' + jQueryslide});
  }

  jQuery(this).removeClass('prev next');
  jQuery(this).siblings().removeClass('prev active next');

  jQuery(this).addClass('active');
  jQuery(this).prev().addClass('prev');
  jQuery(this).next().addClass('next');
});


// Keyboard nav
jQuery('html body').keydown(function(e) {
  if (e.keyCode == 37) { // left
    jQuery('.active').prev().trigger('click');
  }
  else if (e.keyCode == 39) { // right
    jQuery('.active').next().trigger('click');
  }
});

有什么解决办法吗？谢谢...

Answer 1

您有四个项目，最后一个项目不可见。项目的总长度大于文档的宽度。

这将解决您的问题

Answer 2

问题不具有图像的显示属性。问题是“ .image-3d-carousel”的“ display flex”和“ justify-content center”。如果我们有奇数个图像，则中间图像将居中，因为它是默认的“正当内容中心”行为。当然，如果我们有偶数个图像，则flex容器会尝试使其内容居中，这意味着中间图像将以相同的距离远离中心。

从我的角度来看，最好制作某种框架，该框架具有活动图像的宽度并且将永久居中。框架包含旋转木马，该框架会溢出但具有可见的内容。

您可以在此处https://jsfiddle.net/14u6Lmn3/

查看示例

居中框架容器（仅用于满足jsfiddle发布要求）：

.image-3d-frame {
    margin: 0 auto;
    width: 375px;
}

我刚刚用称为“框架”的容器包装了旋转木马，移除了属性“正当内容中心”，因为我们将主图像与框架居中，并由于第二个图像处于活动状态而赋予了初始偏移量。希望我的想法很清楚。