Сова Карусель возникла проблема при изменении размера окна - PullRequest
Новая
       7

Сова Карусель возникла проблема при изменении размера окна

0 голосов
/ 03 января 2019

У меня есть сова с каруселью изображений, а затем, когда я изменяю размер или просто нажимаю f12, на нем появляются маленькие фотографии. Моя инициализация основана на кнопке, которую нажимает пользователь. Например, у меня есть 5 кнопок. Если я нажму одну кнопку, другая карусель должна разрушиться, и div будет скрыт. но затем, когда я нажимаю и нажимаю клавишу f12, а затем снова нажимаю кнопку, отображаются маленькие миниатюры. Пожалуйста, смотрите фото для справки.

enter image description here

После нажатия f12

enter image description here

вот мой код в script.js 

$("#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')
    }

мой HTML 

   <div class="main-content residential" id="residentialdiv">
                            <div class="gallery-slider-residential residential owl-carousel owl-theme" id="gallery-slider-residential">
                                <div class="gallery-item">
                                    <div class="gallery_box">
                                        <div class="gallry_wrp">
                                            <img src="images/gallery/residential/1.jpg" alt="">
                                            <div class="gallery_info">
                                                <h4 class="heading"><a class="lightbox-image" data-fancybox-group="residential-gallery-1"  href="images/gallery/residential/1-whole.jpg">View Photo</a></h4>
                                            </div>
                                            <ul class="link_icons">
                                                <li><a class="lightbox-image" data-fancybox-group="residential-gallery-2" href="images/gallery/residential/1-whole.jpg"><i class="fa fa-search-plus" aria-hidden="true"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                   </div>
 <div class="owl-theme">
                            <div class="owl-controls">
                                <div class="custom-nav owl-nav residential-nav"></div>
                            </div>
                        </div>
    </div>
...