Как реализовать динамическое обновление слайдера Owlcarousel?

Question

[Error 502]

Необходимо реализовать динамическое обновления слайдера Owl Carousel - при нажатии на блок идет запрос через ajax на сервер, который возвращает готовые блоки item-ов, с этой частью все окей, но слайдер при этом работает неправильно (по идее нужно как-то переинициализировать его при каждом обновлении, но я не знаю как).
Вот код:

$(".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

[sergueishim]

Вот здесь поищите свою проблему https://github.com/OwlCarousel2/OwlCarousel2/issues . Поскольку не совсем понятно описана ситуация. Мой нестандартный совет попробуйте другую либу - поскольку эта ваша либи очевидно сломано - слишком много issue аля Not working

Answer 2

[Lord_Dantes]

Есть события на уничтожение карусели, типо делайте при аяксе уничтожение карусели и потом просто заново создавайте её. Точно кодом не подскажу уже давно делал. НО это возможно. Вот доки https://owlcarousel2.github.io/OwlCarousel2/docs/a...

Answer 3

[Andrew]

$(".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,
                        },
                    }
                });
            }
        );
    });