почему мои изображения не загружаются в карусель, пока я не открою инструмент проверки?

Question

Моя карусель работает нормально. Но когда изображение загружается, оно не показывает изображение идеально. После открытия моего инструмента проверки он показывает мне правильные изображения. Так что, пожалуйста, помогите мне с этой проблемой. Может быть, CSS и JS не загружаются, когда начинается карусель. Css и Js загружаются после открытия инструмента проверки.

https://www.vfes.in/

Это веб-ссылка в карусельной части событий, когда во всплывающем меню нажмите открыть новую карусель, но после открытия инструмента проверки всплывающая карусельная работа работает правильно.

Answer 1

На самом деле из-за css и js всплывающего меню, есть перегруженные карусели css и js.Так что лучше использовать в iframe. Это работает должным образом. Или вызовите carosal div из-за пределов div всплывающего окна.

Answer 2

Мы должны добавить карусельный код изменения размера в javascript. Я сделал этот код для моей другой карусели и, где я хочу, я просто вызываю эту функцию, и для этого div он будет изменен автоматически

        function ResCarouselSize() {
            var incno = 0;
            var dataItems = ("data-items");
            var itemClass = ('.item');
            var id = 0;
            var btnParentSb = '';
            var itemsSplit = '';
            var sampwidth = $(itemsMainDiv).width();
            var bodyWidth = $('body').width();
            $(itemsDiv).each(function () {
                id = id + 1;
                var itemNumbers = $(this).find(itemClass).length;
                btnParentSb = $(this).parent().attr(dataItems);
                itemsSplit = btnParentSb.split(',');
                $(this).parent().attr("id", "MultiCarousel" + id);


                if (bodyWidth >= 1200) {
                    incno = itemsSplit[3];
                    itemWidth = sampwidth / incno;
                }
                else if (bodyWidth >= 992) {
                    incno = itemsSplit[2];
                    itemWidth = sampwidth / incno;
                }
                else if (bodyWidth >= 768) {
                    incno = itemsSplit[1];
                    itemWidth = sampwidth / incno;
                }
                else {
                    incno = itemsSplit[0];
                    itemWidth = sampwidth / incno;
                }
                $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
                $(this).find(itemClass).each(function () {
                    $(this).outerWidth(itemWidth);
                });

                $(".leftLst").addClass("over");
                $(".rightLst").removeClass("over");

            });
        }

Answer 3

да обнаружена проблема в js

owl-item cloned

этот класс не обновляет ширину при открытии всплывающего окна.его работа только тогда, когда вы измените размер браузера.поэтому вы должны вызывать тот же js при открытии всплывающего окна.