How to implement dynamic update of Owlcarousel slider?

Question

JavaScript

It is necessary to implement a dynamic update of the Owl Carousel slider - when you click on the block, a request is sent via ajax to the server, which returns ready-made blocks of items, everything is ok with this part, but the slider does not work correctly (in theory, you need to somehow reinitialize it with each update, but I don't know how).
Here is the code:

$(".mediaSld .item").click(function() {
        console.log('0');
        var album_id = $(this).data('id');
        $.post(
            "",
            {
                'album_id': album_id
            },
            function (resp) {
                console.log(resp);
                $('#popUpSlider').html(resp);
                $(".popUpSld").fadeIn(600);
                $("#popUpSlider").owlCarousel({
                    loop: true,
                    margin: 20,
                    nav:true,
                    items:3,
                    navText: ['<img src="../site/templates/image/leftBlack.svg" alt="">', '<img src="../site/templates/image/rightBlack.svg" alt="">'],
                    responsive: {
                        
                        0: {
                            items: 1
                        },
                        320: {
                            
                            items:1,
                        },
                        767: {
                           
                            items: 2,
                            margin: 10
                        },
                        991: {
                            items: 3,
                        },
                    }
                });
            }
        );
    });

Answer 1

Look here for your issue https://github.com/OwlCarousel2/OwlCarousel2/issues . Because the situation is not very clear. My offhand advice is to try another lib - since your lib is obviously broken - too many issue ala Not working

Answer 2

There are events for the destruction of the carousel, supposedly do the destruction of the carousel with Ajax and then simply re-create it. Exactly the code I will not prompt already for a long time did. BUT it's possible. Here are the docs https://owlcarousel2.github.io/OwlCarousel2/docs/a...

Answer 3

$(".mediaSld .item").click(function() {
        console.log('0');
        var album_id = $(this).data('id');
        $.post(
            "",
            {
                'album_id': album_id
            },
            function (resp) {
                console.log(resp);
                $('#popUpSlider').html(resp);
                $(".popUpSld").fadeIn(600);
$('#popUpSlider').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#popUpSlider').find('.owl-stage-outer').children().unwrap();
                $("#popUpSlider").owlCarousel({
                    loop: true,
                    margin: 20,
                    nav:true,
                    items:3,
                    navText: ['<img src="../site/templates/image/leftBlack.svg" alt="">', '<img src="../site/templates/image/rightBlack.svg" alt="">'],
                    responsive: {
                        
                        0: {
                            items: 1
                        },
                        320: {
                            
                            items:1,
                        },
                        767: {
                           
                            items: 2,
                            margin: 10
                        },
                        991: {
                            items: 3,
                        },
                    }
                });
            }
        );
    });