如何在猫头鹰旋转木马(v1.3.3)导航悬停时添加下一张和上一张幻灯片的预览?

时间:2016-07-26 06:32:00

标签: javascript owl-carousel

这里附有img我想要的东西

example image

任何人都知道我可以在owl carousel v1.3.3中做到这一点,甚至在最新的测试版中如果在v1.3.3中无法做到这一点。我需要将下一张或上一张幻灯片的预览显示为悬停在上一个箭头旁边的猫头鹰导航上。

感谢。

1 个答案:

答案 0 :(得分:0)

我想如果您可以让旋转木马中的3个项目,第一个和最后一个可以很小,在左/右z-index小于箭头的z-index,您将获得该效果你需要。你认为呢?

如果这不起作用,请考虑使用this,解释herethis

如果你使用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);
        });

});