javascript carousel在小屏幕上没有响应(CSS HTML Js)

我有一个问题与carousel imges滑块
这个问题出现在小屏幕上，我用trnasform translate x让滑块用Js改变图像
问题是在小屏幕上，图像开始混淆，没有以适当的方式出现。
这里是live 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

我已经修复了这个问题，现在它在所有设备上都有响应
将高度更改为自动将图像的宽度更改为关于屏幕宽度的动态，使用以下内容：

carousel.getBoundingClientRect().width

将静态代码替换为将固定像素转换为动态像素

function control() {

if (window.matchMedia("(max-width: 562px)").matches) {

    for (var i = 1; i < img.length; i++) {

        img[i].classList.add(".img-sm");
        img[i].setAttribute("id", "box");
        img[i].style.width = `${carousel.getBoundingClientRect().width}px`;
    }

    function changeImage() {
        if (idx > img.length - 1) {
            idx = 0;
        } else if (idx < 0) {
            idx = img.length - 1;
        }
        images.style.transform = `translateX(${
          -idx * carousel.getBoundingClientRect().width
        }px)`;
    }
    changeImage();
} else {
    for (var i = 1; i < img.length; i++) {
        img[i].classList.remove(".img-sm");
        img[i].removeAttribute('id');
        img[i].style.width = `${carousel.getBoundingClientRect().width}px`

    }

    function changeImage() {
        if (idx > img.length - 1) {
            idx = 0;
        } else if (idx < 0) {
            idx = img.length - 1;
        }
        images.style.transform = `translateX(${
          -idx * carousel.getBoundingClientRect().width
        }px)`;
    }
    changeImage()
}

}
还将图像元素大小更改为：

.image-container img {
width: 100%;
height: auto;
object-fit: cover;
flex-shrink: 1;

}

javascript carousel在小屏幕上没有响应(CSS HTML Js)

1条答案

相关问题

热门标签

最新问答