Question

我正在使用Owl Carousel建立目标网页。我需要父div的背景图像在每张幻灯片上更改为特定图像，并在单击点时执行相同操作。能做到吗？

我不知道如何触发事件以更改背景。

        $('.owl-carousel').owlCarousel({
            center: false,
            items: 1,
            loop: true,
            margin: 10,
            autoWidth: false,
            nav: false,
            responsive: {
                600: {
                    items: 1
                }
            }
        });
    });

自动将背景图像更改为另一幅图像。
单击点时触发更改。

Answer 1

尝试一下，希望对您有所帮助。谢谢

var owl = $('.owl-carousel');
owl.owlCarousel();

// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
    // Trigger method goes here 
})

猫头鹰轮播活动Api https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

Answer 2

谢谢。我已经知道了。这是代码：

            $('.owl-carousel').owlCarousel({
            onTranslated: function(me) {
                $(me.target).find(".owl-item.active [data-src]:not(.loaded)").each(function(i, v) {
                    $(v).addClass("loaded").css("background-image", "url(" + $(v).attr("data-src") + ")");
                });
            },
            animateOut: 'zoomOut',
            animateIn: 'zoomIn',
            center: false,
            items: 1,
            loop: true,
            margin: 10,
            autoWidth: false,
            nav: false,
            responsive: {
                600: {
                    items: 1
                }
            }
        });

幻灯片更改时触发事件

2 个答案: