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

【问题标题】：Add item to Owl Carousel in the first postion将项目添加到 Owl Carousel 的第一个位置
【发布时间】：2017-12-04 09:30:49
【问题描述】：

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

这是我目前所拥有的：

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

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap owl-carousel

【解决方案1】：

好的，我刚刚想通了。

需要这样：

  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 弄清楚您是如何获得结果的