I attempted to create a basic slideshow with images sliding from right to left as an animation:
let slides = document.querySelectorAll('.img-container');
let l = slides.length;
let i = 0;
setInterval(function(){
i = (i + 1) % l;
if(i == 0){
for(let j = l - 1;j != 0;j--){
slides[j].classList.remove('img-slide');
}
} else {
slides[i].classList.add('img-slide');
}
}, 3500);body {
margin: 0px;
}
.section-1 {
width: 100%;
height: calc(100vh - 104.5px);
overflow: hidden;
display: flex;
}
.img-container {
width: 100%;
position: relative;
display: flex;
justify-content: center;
transition: ease 0.7s;
}
.img-container:nth-child(1){
z-index: 0;
}
.img-container:nth-child(2){
z-index: 1;
}
.img-container:nth-child(3){
z-index: 2;
}
.img-container:nth-child(4){
z-index: 3;
}
.img-container:nth-child(2).img-slide{
transform: translateX(-100%);
}
.img-container:nth-child(3).img-slide{
transform: translateX(-200%);
}
.img-container:nth-child(4).img-slide{
transform: translateX(-300%);
}<section class="section-1">
<div class="img-container">
<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
</div>
<div class="img-container">
<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
</div>
<div class="img-container">
<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
</div>
<div class="img-container">
<img src="https://i1.ytimg.com/vi/PKffm2uI4dk/maxresdefault.jpg">
</div>
</section>The example images are stretched because they were placeholders. I have four different png images of 4000x4000 dimensions with transparency, so the "img-container" needs to be 100% of the body and have a background color. The section should have a fixed height. However, when using these larger images, they appear stretched and cropped on mobile devices. I applied:
img {
width: 100%;
height: auto;
}
But this caused all four images to shrink and display simultaneously in the viewport. How can I address this issue or where can I find more information on this topic?