如何在 Owl Carousel(v1.3.3) 导航悬停时添加下一张和上一张幻灯片的预览？答案

【问题标题】：how to add preview of next and previous slide on hover of Owl Carousel(v1.3.3) navigation?如何在 Owl Carousel(v1.3.3) 导航悬停时添加下一张和上一张幻灯片的预览？
【发布时间】：2016-08-01 12:32:33
【问题描述】：

这是我想要的附件图片

example image

任何人都知道我可以在 owl carousel v1.3.3 中执行此操作，如果在 v1.3.3 中无法执行，甚至可以在其最新的 beta 版本中执行此操作。我需要将下一张或上一张幻灯片的预览显示为将鼠标悬停在上一个箭头旁边的猫头鹰导航上。

谢谢。

【问题讨论】：

请查看jsfiddle.net/yunusga/EGrGN。它为子弹设置图像。你可以对箭头做同样的事情。
我已经尝试过了，但它不起作用。我需要在猫头鹰箭头悬停时显示下一张幻灯片的缩略图。
也许如果你让 2 个项目在轮播中并且第二个是小的，在右边的 z-index 小于箭头的 z-index，你会得到你需要的效果。你怎么看？
上一张幻灯片呢？我想我需要如何使用 owl nav 附加下一张和上一张幻灯片......就像在第一个 jsfddle 中一样。但让更多的动态。以某种方式获取上一个和下一个 silde 的 img 的 url 并将其附加到 owl-next 和 owl-prev..

标签： javascript owl-carousel

【解决方案1】：

我认为如果你可以让 3 个项目在轮播中，第一个和最后一个可以小，在左/右 z-index 小于箭头的 z-index，你会得到那个效果你需要。你认为呢？

如果这不起作用，请考虑使用this，解释here 或this。

如果您使用来自 jsfiddle 的链接，请检查那里的功能，

        // i - counter
        // Give some styles and set background image for pagination item
        .css({
            'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
            '-webkit-background-size': 'cover',
            '-moz-background-size': 'cover',
            '-o-background-size': 'cover',
            'background-size': 'cover'
        })
        // set Custom Event for pagination item
        .click(function () {
            owl.trigger('owl.goTo', i);
        });

});

【讨论】：

谢谢，剪裁的 SVG 滑块对我有用。我真的在找这个。非常感谢