jquery - 当滑块向左/向右改变时，如何为 owlcarousel 卡片设置动画

Question

在此链接中，您将看到如下图所示的部分：

我已经设法使用owlcarowsel 实现了滑块。但是，如何添加与链接中的动画相同的动画？

因此，当单击下一个或上一个时，第一个图像首先以动画方式移动，然后它们都以您看到的方式滑动动画。

目前，这就是我的 jquery 的样子：

$(document).ready(function(){

    var owl = $(".owl-carousel");

    owl.each(function() {

        var items = ( $(this).data('items') ) ? $(this).data('items') : 1;

    $(this).owlCarousel({
        loop: true,
        margin:30,
        stagePadding:30,
        smartSpeed: 400,
        'navText': ['< Prev','Next >'],
        onChange: function() {
            console.info('carousel change');
        },
        onChanged: function() {
            console.info('carousel changed');
        }
        //'margin': '30px',
    });
    })
});

或者是否有另一个插件可以做类似于发布的网址的事情？

标签： jquerycssowl-carousel

Answer 1

正如我所看到的，那些人使用完整的 CSS 转换来进行滚动。如果您想对其进行处理，请使用带有 ID 的单个 DIV 中的 3 张图像，然后应用 onclick 操作（如轮播）以轻松制作动画。