Owlcarousel2: calling remove.owl.carousel removes entire carousel

[petty]

... so when I call:

var $carousel = $(".owl-carousel");

$carousel.trigger('remove.owl.carousel', 0 );

... instead of that slide (the first) getting removed the entire carousel is getting removed.

Here's my carousel instantiation:

$carousel.owlCarousel({
                loop: false,
                autoWidth: true,
                dots: true,
                nav: false,
                mouseDrag : true,
                responsive:{
                    0:{
                        items:1
                    },
                    480:{
                        items:2
                    },
                    768:{
                        items:3
                    },
                    1024:{
                        items:4
                    }
                }
            });

Also, what my real goal is, is to be able to iterate & delete, e.g.

for (i=50;i<=100;i++) {
    $carousel.trigger('remove.owl.carousel', i );
}

[Sovenger]

Tagging @witrin for visibility since i'm seeing the same issue.

[sujitkumardora]

Hi. I was facing this problem, so I stared investigating. This is what I found.

jQuery uses 'remove' event to remove element. When you trigger 'remove' or 'remove.owl.carousel' on the carousel element it completely removes the element. After some trials I renamed the event to 'del' (can be anything which is not used) the 'remove.owl.carousel' became 'del.owl.carousel'. It works as expected.

I have heavily modified my file for other features I needed thus I am not sure how and what to commit as a patch. I also seems to have a older file and not sure where my edited functions go in the latest files.

Hope this helps someone to fix the issue.

[AlexWebLab]

Any solutions?!

[cjames]

I caught the same bug. I'm going to go with renaming the event. Beware of the change.owl.carousel event as well as it can be triggered by change events within the item.

[joeyjoejoejr]

Looks like this is a live one.

[richgcook]

I am getting issues, too, even when using this. Essentially, removing the first slide when the screen size is below 767...

$(window).resize(function() {
    if ($(window).width() < 767) {
        $('.wide-slider').each(function() {
            var $this = $(this);
            $this.trigger('remove.owl.carousel', 0);
        });
    }
});

Also, when I try to slide next I am getting this error in my console, presumably because the first slide has gone?

Cannot read property 'indexAbs' of undefined

[sanderkruger]

I'm having the same issue. I tried stepping through the code, but I'm not enough of a jQuery expert to see the bug. Renaming the event looks like a bad option because plugins depend on it, such as navigation, which needs the event to remove the item too.

Looking at the handler in the Navigation plugin, it seems that the bug is not in how the Event object is passed on, although it seems odd to me that the remove target is the Owl object and not the item.

[aleroy]

@sujitkumardora has the gist of it ... but you don't need rename the event.

The Owl.prototype.remove needs to fully-qualify the methodName parameter in its call to this.trigger(). (may be other occurrences of calls this method that could lead to other issues).

Anyways, here's a diff to fix the remove issue (against the current master branch as the time of this post):

1330c1330
<       this.trigger('remove', { content: this._items[position], position: position });
---
>       this.trigger('remove.owl.carousel', { content: this._items[position], position: position });

_{edit}_ Forgot to mention .... I also found I have to use jquery's triggerHandler method from my code:

$('.owl-carousel').triggerHandler( 'remove.owl.carousel', [1] );
// ... instead of ...
$('.owl-carousel').trigger( 'remove.owl.carousel', [1] );

[matthieu-interaktiv]

Any updates on this bug?

[ingeniumdesign]

@OwlFonk please fix this bug. Thanks

[aleroy]

It's fixed in the dev branch. A lot of things are fixed in the dev branch.

If you migrate to the dev branch, note that it deprecates the need for $('.owl-carousel').trigger(), opting for the more stable ('.owl-carousel').owlCarousel(_method_, *_args_)

// remove the first item (dev version)
$('.owl-carousel').owlCarousel( 'remove', 0 );

[oneChifu]

Hey. Thanx to sujitkumardora for idea. I just renamed "remove" event name in owlCarousel code to "del" (for example) and it's work fine. Remove item from carousel dynamicly:

$(document).on('click', 'delete_item', function(e) {
e.preventDefault();
$(this).closest('.owl-item').trigger('del.owl.carousel', $(this).index()).trigger('refresh.owl.carousel');
});

[jin-cheng]

work well

Line 1424
this.trigger('remove', { content: this._items[position], position: position });
-->
this.trigger('del', { content: this._items[position], position: position });

Line 1431
this.trigger('removed', { content: null, position: position });
-->
this.trigger('deled', { content: null, position: position });

Line 1457
'remove': this.remove
-->
'del': this.remove

for js invoke
$('#owl_carousel').trigger('del.owl.carousel', 1).trigger('refresh.owl.carousel');

[digz6666]

Is it included in the master branch?

[samir-kamble]

not working for me at-least. Cant remove intermediate elements on click of delete of each item.

[buingthai]

my ideal for older version (<2.2) carousel:
$(".owl-item").remove()
then, you can add item with event "add.owl.carousel"
hope to help you!

[foxartbox]

Working solution:

* HTML

<div class="header_links">
    <div class="owl-carousel">
        <a href=""><img src="/images/1.jpg" alt="" /></a>
        <a href=""><img src="/images/1.jpg" alt="" /></a>
        <a href=""><img src="/images/1.jpg" alt="" /></a>
        <a href=""><img src="/images/1.jpg" alt="" /></a>
    </div>
</div>

* JS

$(window).bind("load", function() {
    // copy default code before carousel loaded
    var header_links__html = $('.header_links').html();

    window_resize();

    $(window).resize(function() {
        window_resize();
    });

    function window_resize() {
        // mobile
        if ( $(window).width() < 900 ) {
            if ( !$('.header_links').find('.owl-carousel').hasClass('owl-loaded') ) {
                $('.header_links').find('.owl-carousel').owlCarousel({
                    autoplay: true,
                    autoplayHoverPause: true,
                    autoplayTimeout: 2500,
                    dots: true,
                    items: 2,
                    loop: true,
                    nav: false,
                    responsive: {
                        0: {
                            items: 1
                        },
                        320: {
                            items: 2
                        },
                        600: {
                            items: 3
                        },
                        800: {
                            items: 5
                        }
                    },
                    smartSpeed: 350
                });
            }
        }
        //desktop
        else {
            if ( $('.header_links').find('.owl-carousel').hasClass('owl-loaded') ) {
                $('.header_links').find('.owl-carousel').remove();

                $('.header_links').append( header_links__html );
            }

            if ( !$('.header_links').find('.owl-carousel').length ) {
                $('.header_links').append( header_links__html );
            }
        }
    }
});

[faderriko]

Thanks foxartbox . Its working

[pascalporedda]

Seems like this one is solved.