Question

我目前正在使用Owl Carousel并通过AJAX填充。当我使用addItem方法时，Owl Carousel转到第一个项目，但我希望轮播转到添加的项目。所以为了得到我用跳转，但这里的问题是旋转木马首先进入然后跳转到添加的项目。我只需要旋转木马去最新的项目。

Answer 1

我有同样的问题因此我使用 lazyLoad：true，
我使用下面的代码解决了它：

var itemBlock ='<div> slider item </div>'; \\ add your code in ajax

$('#owl-slider').html(itemBlock).trigger('create');

$("#owl-slider").owlCarousel({
        // Most important owl features
        ltr:true,
        items : 5,
        itemsCustom : false,
        itemsDesktop : [1199,8],
        itemsDesktopSmall : [980,5],
        itemsTablet: [768,4],
        itemsTabletSmall: false,
        itemsMobile : [479,2],
        singleItem : false,
        itemsScaleUp : false,

        //Basic Speeds
        slideSpeed : 200,
        paginationSpeed : 800,
        rewindSpeed : 1000,

        //Autoplay
        autoPlay : false,
        stopOnHover : false,

        // Navigation
        navigation : false,
        navigationText : ["prev","next"],
        rewindNav : true,
        scrollPerPage : false,

        //Pagination
        pagination : false,
        paginationNumbers: false,

        // Responsive
        responsive: true,
        responsiveRefreshRate : 200,
        responsiveBaseWidth: window,

        // CSS Styles
        baseClass : "owl-carousel",
        theme : "owl-theme",

        //Lazy load
        lazyLoad : true,
        lazyFollow : true,
        lazyEffect : "fade",

        //Auto height
        autoHeight : false,

        //JSON
        jsonPath : false,
        jsonSuccess : false,

        //Mouse Events
        dragBeforeAnimFinish : true,
        mouseDrag : true,
        touchDrag : true,

        //Transitions
        transitionStyle : false,

        // Other
        addClassActive : false,
        activeClass:true,

        //Callbacks
        beforeUpdate : false,
        afterUpdate : false,
        beforeInit: false,
        afterInit: false,
        beforeMove: false,
        afterMove: false,
        afterAction: false,
        startDragging : false,
        afterLazyLoad : false
    });

var owls = $("#owl-slider").data('owlCarousel'); 
owls.goTo($('.item').length);

Answer 2

通过逐步执行addItem()我注意到整个旋转木马首先被“破坏”，然后重新添加新项目。所以目前还没有真正的解决方案。

如果您希望在保持滑动动画的同时跳转到最新项目（不是从第一项开始然后从最后一项开始），请尝试jumpTo()到最后一项，设置超时10毫秒（如果在我的情况下省略，则不起作用），然后调用next()。

owl.jumpTo(/*second last item index*/);
setTimeout(function() {
  owl.next();
}, 10);

Owl Carousel addItem问题

2 个答案: