猫头鹰轮播在调整窗口大小时出现问题

Question

我有一个图像的猫头鹰轮播，然后当我调整大小或按f12键时，它将只显示少量照片。我的初始化基于用户单击的按钮。例如，我有5个按钮，如果我按一个按钮，则其他旋转木马应销毁，并且div将被隐藏。但是，当我按f12并再次按一个按钮时，它将显示一些小缩略图。请参阅图片以供参考。

按f12后

这是我在script.js中的代码

Change[]

我的html

$("#residential").click(function(){

            destroy_owl($('#gallery-slider-office'));

            destroy_owl($('#gallery-slider-educfacilities'));

            destroy_owl($('#gallery-slider-clubhouse'));

            destroy_owl($('#gallery-slider-workshop'));

            destroy_owl($('#gallery-slider-commercial'));
            initialize_owl($('#gallery-slider-residential'),'.residential-nav');
            $( "#residentialdiv" ).fadeIn('slow');
            $("#residentialdiv").show();
            $("#officediv").hide();
            $("#mainphotos").hide();
            $("#educfacilitiesdiv").hide();
            $("#clubhousediv").hide();
            $("#workshopdiv").hide();
            $("#commercialdiv").hide();
        });

function initialize_owl(el,nav) {
        el.owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            smartSpeed: 500,
            autoplay: 4000,
            items:1,
            dots:true,
            navText: [
                '<i class="fa fa-angle-left" aria-hidden="true"></i>',
                '<i class="fa fa-angle-right" aria-hidden="true"></i>'
            ],
            navContainer: nav,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                800:{
                    items:3
                },
                1024:{
                    items:4
                },
                1200:{
                    items:4
                }
            }
        });
    }
    function destroy_owl(el) {
        el.owlCarousel('destroy')
    }