除非调整窗口大小，否则不会加载轮播图像

Question

我已经花了很多时间试图找到一个解决办法，但没有运气。

我正在使用旋转木马并通过javascript文件设置图像。然而，有趣的是，当我加载页面时，只有第一个图像按需要出现，其他图像（第2个，第3个....）只有当我调整窗口大小时才会出现，然后一切都正常工作。

这里是我的HTML

null

(function() {
var type='auto';
  console.log(type);
  for(var 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 {
  width: 100%;
}
.portfolio-details-slider{
  margin-top: 20px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #4154f1;
  background-color: #4154f1;
}
.swiper-container{
  margin-left:auto;
  margin-right:auto;
  position:relative;
  overflow:hidden;
  list-style:none;
  padding:0;
  z-index:1
}
.swiper-slide {
  opacity: .3;
}
.swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
}
.swiper-slide img:hover {
  opacity: 1;
}

<section >
<div class="row gy-4">

    <div class="col-lg-8">
      <div class="portfolio-details-slider swiper-container">
        <div id="sample-image-carousal" class=" swiper-wrapper align-items-center">

        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    </div>
</section>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

null

另外，需要注意的是，我使用的是Swiper包CDN

我试着从其他答案中添加max-width和height属性，但没有帮助。我能做些什么来解决这个问题吗？

另一个有趣的观察是，当我将图像添加到HTML本身中的DOM时，它会像预期的那样工作。

Answer 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;
            }

        }