旋转木马在小屏幕上没有响应（CSS HTML Js）不需要框架

Question

我对轮播图像滑块有疑问

问题出现在小屏幕上我使用 trnasform tranlate x 使滑块使用 Js 更改图像

问题是在小屏幕上图像开始冲突并且没有以适当的方式出现。

her 是现场项目的链接Project

HTML代码

 <section class="slider1">
        <div id="slider" class="container">
            <div class="projects">
                <div class="title">
                    <h5 dir="rtl " lang="ar ">مشاريعنا وتصميماتنا</h5>
                </div>
                <div class="carousel ">
                    <div id="images" class="image-container">
                        <img src="./assets/food.jpg " alt=" تصميم فيسبوك مطعم كابوريا" />
                        <img src="./assets/ozi4.jpg " alt="تصميم اعلان لمحلات كشري الهادي بالفيوم " />
                        <img src="./assets/green.jpg " alt="تصميم اعلان سوشيال ميديا فندق جرين هاوس بني سويف  " />
                        <img src="./assets/ozi.jpg " alt=" تصميم ترويجي لوجبه طعام مطعم اوزي الفيوم" />
                        <img src="./assets/ozi2.jpg " alt=" تصميم بوست سوشيال ميديا تجاري" />
                        <img src="./assets/ozi3.jpg " alt=" تصميم بوست شويال ميديا لحمله اعلان مموله" />
                        <img src="./assets/socialshre.jpg " alt="براند بانر لوجو" />
                    </div>
                    <div class="buttons-container">
                        <button id="left" class="btn ">Prev</button>
                        <button id="right" class="btn">Next</button>
                    </div>
                </div>
            </div>


        </div>
    </section>

/*Projects Carousal Start*/

.projects {
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    border-radius: 0.3rem;
    margin-bottom: 0.3rem;
}

.projects h5 {
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
    background-image: linear-gradient( to left, var(--brand_color_one--), var(--brand_color_two--), var(--brand_color_three--), var(--brand_color_four--), var(--brand_color_five--));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 1.5rem;
    line-height: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.carousel {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    height: 530px;
    width: 500px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.image-container {
    display: flex;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
}

.image-container img {
    width: 500px;
    height: 500px;
    object-fit: cover;
}

.buttons-container {
    display: flex;
    justify-content: space-between;
}

.btn {
    background-color: var(--brand_color_one--);
    color: #fff;
    border: none;
    cursor: pointer;
    width: 49.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 400;
    transition: transform 0.5s ease-in-out;
    height: 2rem;
}

.btn:hover {
    opacity: 0.9;
    background-image: linear-gradient( to right, var(--brand_color_one--), var(--brand_color_two--), var(--brand_color_three--), var(--brand_color_four--), var(--brand_color_five--));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn:focus {
    outline: none;
}


/*Projects Carousal End*/

const images = document.getElementById("images");
const leftBtn = document.getElementById("left");
const rightBtn = document.getElementById("right");
const img = document.querySelectorAll("#images img");

//iniate index
let idx = 0;
//func interval to automate slides moving
let interval = setInterval(run, 2000);

//func changeImage work by checking if the idx bigger
// ..or less than the images array from the dom
function changeImage() {
  if (idx > img.length - 1) {
    idx = 0;
  } else if (idx < 0) {
    idx = img.length - 1;
  }
  images.style.transform = `translateX(${-idx * 500}px)`;
}

//func run increment the indx, call changeImage func
function run() {
  idx++;
  changeImage();
}

//to avoid issues with auto sliding
function resetInterval() {
  clearInterval(interval);
  interval = setInterval(run, 2000);
}

rightBtn.addEventListener("click", () => {
  idx++;
  changeImage();
  resetInterval();
});

leftBtn.addEventListener("click", () => {
  idx--;
  changeImage();
  resetInterval();
});
// images Silder end