html，css，js滑块图像在窗口调整大小时折叠

如何解决html，css，js滑块图像在窗口调整大小时折叠

在尝试构建响应式网站时，直到我调整窗口大小之前，一切工作都很好。滑块内的图像折叠。我必须先重新加载页面，以便它们处于理想位置。我应该怎么做，以便在调整窗口大小时不需要重新加载页面？

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

这是我的代码段。 https://codepen.io/rebeccafm/pen/YzWyrvm

解决方法

我找到了答案。我使用jquery调整大小方法。

$(window).resize(() => {
slideWidth = slides[index].clientWidth;
slide.style.transform = `translateX(${-slideWidth * index}px)`;

}）;