html, css, js slider images collapse on window resize - slider

Question

Everything perfectly works great until I resize the window as I'm trying to build a responsive website. The images inside the slider collapses. I have to reload the page first so they will be in perfect position. What should I do so i don't need to reload the page when resizing the window?
html
<div class="container">
<!-- --- images ---- -->
<div class="slides">
<div class="slide">
<img src="/images/img1.jpg" alt="">
</div>
<div class="slide">
<img src="/images/img2.jpg" alt="">
</div>
<div class="slide">
<img src="/images/img3.jpg" alt="">
</div>
<div class="slide">
<img src="/images/img4.jpg" alt="">
</div>
</div><!-- ---- end of images ---- -->
<!-- ------ controls -------- -->
<div class="slide-controls">
<button id="prev-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button id="next-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<!-- ------ controls -------- -->
</div> <!-- ----- end of container ------- -->
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 20px auto 0 auto;
width: 60%;
height: 600px;
position: relative;
border: 2px solid red;
overflow: hidden;
}
.slides {
display: flex;
height: 100%;
}
.slide {
min-width: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
}
.slide-controls {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
/* display: none; */
}
#next-btn,
#prev-btn {
cursor: pointer;
background: transparent;
font-size: 40px;
border: none;
padding: 10px;
color: white;
}
#next-btn:focus,
#prev-btn:focus {
outline: none;
}
js
const slideContainer = document.querySelector('.container');
const slide = document.querySelector('.slides');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const interval = 3000;
let slides = document.querySelectorAll('.slide');
let index = 1;
let slideId;
const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length - 1].cloneNode(true);
firstClone.id = 'first-clone';
lastClone.id = 'last-clone';
slide.append(firstClone);
slide.prepend(lastClone);
const slideWidth = slides[index].clientWidth;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
const startSlide = () => {
slideId = setInterval( () => {
moveToNextSlide();
}, interval);
}
const getSlides = () => slides = document.querySelectorAll('.slide');
slide.addEventListener('transitionend', () => {
slides = getSlides();
if ( slides[index].id === firstClone.id ) {
slide.style.transition = 'none';
index = 1;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
}
if ( slides[index].id === lastClone.id ) {
slide.style.transition = 'none';
index = slides.length - 2;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
}
});
slideContainer.addEventListener('mouseenter', () => {
clearInterval(slideId);
});
slideContainer.addEventListener('mouseleave', startSlide );
const moveToNextSlide = () => {
slides = getSlides();
if ( index >= slides.length -1 ) return;
index++;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
slide.style.transition = '.7s';
}
const moveToPreviousSlide = () => {
if ( index <= 0 ) return;
index--;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
slide.style.transition = '.7s';
};
nextBtn.addEventListener('click', moveToNextSlide);
prevBtn.addEventListener('click', moveToPreviousSlide );
startSlide();
Here's my code snippet. https://codepen.io/rebeccafm/pen/YzWyrvm

Answer 1

i found the answer to this. I use jquery resize method.
$(window).resize(() => {
slideWidth = slides[index].clientWidth;
slide.style.transform = `translateX(${-slideWidth * index}px)`;
});