javascript - 轮播动画的逻辑情况

Question

我有以下情况：我正在使用轮播，在实现中我使用负边距和正边距。当你将图像向左移动时，需要将上一张图像的边距设置为 0。我这里有一个例子。

发生的情况是，当我将一个项目拖到左侧时，您可以看到另一个图像出现在屏幕上的效果。这看起来很难看，所以我需要解决这个问题。我怎样才能？

Answer 1

我认为问题就在这里。在你的 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 );

Answer 2

我个人喜欢猫头鹰旋转木马来处理这些类型的事情。

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 示例