Javascript 除非调整窗口大小，否则不会加载旋转木马图像

我已经花了好几个小时试图找到解决这个问题的办法，但没有运气

我正在使用旋转木马，并通过javascript文件设置图像。然而，有趣的是，当我加载页面时，只有第一个图像按需要显示，而其他图像（第二个、第三个……）仅在我调整窗口大小时显示，之后一切正常

这是我的HTML

（函数（）{
var type='auto'；
console.log（类型）；
对于（变量i=1；i<9；i++）{
var newDiv=document.createElement（'div'）；
newDiv.id='sample image carousel element'+i；
newDiv.className='swiper slide'；
document.getElementById（'sample-image-carousal'）.appendChild（newDiv）；
var newImage=document.createElement（'img'）；
newImage.id='sample image carousel element image'+i；
newImage.src='assets/img/dc_-website/portfolio_-images/'+type+'/'+type+'+i+'.jpg'；
document.getElementById（'sample-image-carousel-element'+i）.appendChild（newImage）；
}
})();
.portfolio details slider img{
宽度：100%；
}
.投资组合详细信息滑块{
边缘顶部：20px；
位置：相对位置；
宽度：12px；
高度：12px；
背景色：#fff；
不透明度：1；
边框：1px实心#4154f1；
背景色：#4154f1；
}
.swiper容器{
左边距：自动；
右边距：自动；
位置：相对位置；
溢出：隐藏；
列表样式：无；
填充：0；
z指数：1
}
.滑梯{
不透明度：.3；
}
.滑动滑梯img{
不透明度：0.5；
过渡：0.3s；
}
.滑动滑梯img：悬停{
不透明度：1；
}
是否有特定于屏幕大小的css行？当您达到特定的窗口大小时，它是否显示其他图像



        @media screen and (max-width: 1680px) {

            html {
                font-size: 12pt;
            }

        }

        @media screen and (max-width: 1280px) {

            html {
                font-size: 11pt;
            }

        }

        @media screen and (max-width: 360px) {

            html {
                font-size: 10pt;
            }

        }

在@Hans Spieß的帮助和推动下，我发现Swiper在加载页面时（在加载图像之前）就初始化了carousel元素，该页面位于一个单独的
js
文件中。在调整大小时，Swiper重新评估页面，然后找到所有图像

为了解决这个问题，我在问题中提到的
js
代码之后移动了包含initialise语句的代码部分，并得到了期望的结果
 我猜Swiper会在加载后立即初始化，所以它有可能在所有图像都附加到dom之前初始化。在resize swiper上，重新计算页面，以便找到所有图像。创建所有图像元素后，尝试手动初始化Swiper@谢谢你！这就是问题所在，我在加载图像后移动了初始化。如果你愿意将此作为答案发布，我很乐意将其标记为答案。你可以随时回答自己的问题：）很高兴它有效！遗憾的是，这没有起作用。但我根据@Hans Spieß的评论得到了解决方案。