After investing countless hours into finding a solution, I am still unable to resolve this issue.
The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image appears as intended. The subsequent images (2nd, 3rd....) only show up when I resize the window, after which everything functions properly.
Below is the snippet of HTML code:
(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>Additionally, I am using Swiper bundle CDN's which are crucial to note.
Despite attempting various solutions by adding max-width and height properties, I have not been able to make any progress. Any advice or suggestions on how I can address this issue?
An intriguing discovery is that when I manually add the images to the DOM in HTML, everything functions as expected.