旋转木马动画的逻辑情况

Question

我有以下情况：我正在使用旋转木马，在实施中我使用负边距和正边距。将图像向左移动时，上一个图像的边距需要设置为0.我有一个示例here。

当我将项目向左拖动时，您可以看到让另一个图像出现在屏幕上的效果。这看起来很难看，所以我需要解决这个问题。我怎么能？

Answer 1

我个人喜欢这种类型的猫头鹰旋转木马。

HTML

<div id="slider" class="owl-carousel">
    <div><img src="http://tmp.innovacionesweb.info/img/slides/6.jpg" /></div>
    <div><img src="http://tmp.innovacionesweb.info/img/slides/7.jpg" /></div>
    <div><img src="http://tmp.innovacionesweb.info/img/slides/8.jpg" /></div>
</div>

的jQuery

$(document).ready(function() {
  $("#slider").owlCarousel();
});

jsFiddle example

Answer 2

我认为问题在这里。在你的main.js文件中

$active.css( 'margin-left', 0 );
$active.prev( '.owl-item' ).css('margin-left', 400);

您应该切换这两行，如

$active.prev( '.owl-item' ).css('margin-left', 400);
$active.css( 'margin-left', 0 );