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

如何解决除非我调整窗口大小，否则不会加载轮播图像

我一直在花费数小时和数小时试图找到解决方案，但没有运气。

我正在使用 Carousel 并通过 javascript 文件设置图像。然而，有趣的是，当我加载页面时，只有第一张图片会按需要出现，而其他图片（第二张、第三张....）只在我调整窗口大小时显示，之后一切正常。>

这是我的 HTML

(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>

另外，重要的是要注意，我使用的是 Swiper 捆绑 CDN，其中

我尝试从其他答案中添加 max-width 和 height 属性，但没有帮助。关于我可以做些什么来解决这个问题的任何指示？

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

解决方法

是否有任何屏幕尺寸特定的 css 行？当您达到特定的窗口大小时，它是否会显示其他图像？

MaxentVariableSelection::VariableSelection(maxent="C:/Users/Piyali/Desktop/msc_paper/R_SDM/maxent.jar",outdir="C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2",gridfolder="/Users/Piyali/Desktop/msc_paper/R_SDM/30sclippedascii",occurrencelocations="C:/Users/Piyali/Desktop/msc_paper/R_SDM/xocc_all.csv",backgroundlocations="C:/Users/Piyali/Desktop/msc_paper/R_SDM/xbg_all.csv",additionalargs="nolinear noquadratic noproduct nothreshold noautofeature",contributionthreshold=5,correlationthreshold=0.9,betamultiplier=seq(2,6,0.5))

Error in .local(.Object,...) : 

In addition: Warning messages:

1: In system(paste("java -jar",maxent,"-o",outdir,"-j",gridfolder,:
  running command 'java -jar C:/Users/Piyali/Desktop/msc_paper/R_SDM/maxent.jar -o     C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2 -j /Users/Piyali/Desktop/msc_paper/R_SDM/30sclippedascii/ -s C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2/xocc_all.csv_VariableSubset.csv -e C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2/xbg_all.csv_VariableSubset.csv plots=false writeplotdata=false visible=false autorun=true randomseed=true writebackgroundpredictions=false replicates=10 replicatetype=subsample randomtestpoints=50 redoifexists writemess=false writeclampgrid=false askoverwrite=false pictures=false outputgrids=false -b 2 nolinear noquadratic noproduct nothreshold noautofeature' had status 1


2: In system(paste("java -jar",:
      running command 'java -jar C:/Users/Piyali/Desktop/msc_paper/R_SDM/maxent.jar -o C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2 -j /Users/Piyali/Desktop/msc_paper/R_SDM/30sclippedascii/ -s C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2/xocc_all.csv_VariableSubset.csv -e C:/Users/Piyali/Desktop/msc_paper/R_SDM/outputtest2/xbg_all.csv_VariableSubset.csv plots=false writeplotdata=false visible=false autorun=true randomseed=true writebackgroundpredictions=false redoifexists writemess=false writeclampgrid=false askoverwrite=false pictures=false outputformat=raw -b 2 nolinear noquadratic noproduct nothreshold noautofeature' had status 1


Error in .rasterObjectFromFile(x,band = band,objecttype = "RasterLayer",: 
      Cannot create a RasterLayer object from this file. (file does not exist)

,

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

为了解决这个问题，我把问题中提到的js代码后面有初始化语句的那部分代码移动了，得到了想要的结果！