将项目添加到 Owl Carousel 的第一个位置

Posted 2023-05-07

【中文标题】将项目添加到 Owl Carousel 的第一个位置

【英文标题】：Add item to Owl Carousel in the first postion

【发布时间】：2017-12-04 09:30:49

【问题描述】：

到目前为止，我可以将幻灯片动态添加到猫头鹰轮播中。但我不知道如何让它放在开头？我对文档进行了一些梳理，但我并不清楚如何成为第一张幻灯片，而不是最后一张。

这是我目前所拥有的：

JS

  var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
    $("#carousel").data('owlCarousel').addItem(img);

我认为这会很容易，但我不确定是什么方法让它排在第一位。

【参考方案1】：

好的，我刚刚想通了。

需要这样：

JS

  var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
  $("#carousel").data('owlCarousel').addItem(img,[0]);

我仔细研究了一下，发现addItem 会在给定位置添加一张幻灯片。因此，通过将值传递给它，会将幻灯片插入到轮播中的特定位置。我遇到的另一个问题是我在测试时使用了[1]，它将幻灯片插入到第二个位置。通过将其设置为[0]，可以在开头插入幻灯片。

【参考方案2】：

@ultraloveninja 添加后可能会有一些奇怪的东西。 我在下面使用：

var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
$("#carousel").data('owlCarousel').trigger('add.owl.carousel', [$(img), 0])
        .trigger('refresh.owl.carousel')
        .trigger('to.owl.carousel', [0, 500]);

【参考方案3】：

$(document).ready(function () var owl = $(".owl-carousel").owlCarousel( 循环：真， 边距：10， 响应类：真， 自动播放：是的， 响应： 0： 项目：1， 导航：真实 , 600： 项目：3， 导航：假 , 1000： 项目：5， 导航：是的， 循环：假 , 可附加：函数（）

            ,
            triggerable: function (data) 
                this.data = data + 'jfeoajfeo'
                console.log('replace')
                console.log(data)
            

        );

        var img = '<div class="item"><img src="../images/added-img.jpg"></div>';
        owl.trigger('add.owl.carousel', img)


    );

【讨论】：

请格式化您的代码，因为这种形式很难阅读。还建议在代码旁边描述您的答案，以便 OP 弄清楚您是如何获得结果的