猫头鹰轮播addItem问题

Question

I'm currently using Owl Carousel and populating via AJAX. When I use the addItem method Owl Carousel goes to the first item, but I want the carousel to go to the item that was added. So to get that I used jump to, but the problem here is the carousel goes to first and then jumps to added item. I just need the carousel to go to latest item.

Answer 1

i had the same issue so i used lazyLoad : true,
I resolved it using this code below:

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

By stepping through the execution of addItem() I've noticed that the entire carousel is "destroyed" first then rebuilt with the new item added. So for now there is no real solution to your problem.

If you wish to jump to the latest item while keeping the sliding animation (not starting from the first then whoosh to the last), try jumpTo() to the second last item, set a timeout of like 10 milliseconds (will not work if omitted in my case), then call next() .

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