Как оптимизировать слайдер?

Question

Есть слайдер, необходимо его оптимизировать, чтобы слайды подгружались по надобности. То есть, когда нажимаешь на стрелочку вперед, отрисовывался слайд, а предыдущий удалялся. Я знаю как это делается, но мой слайдер двигается при помощи transform и, когда я удаляю предыдущий слайд, текущий сдвигается влево.

Также отдельным вопросом остается как реализовать отрисовку слайдов сзади.

Код:

let productsImages = document.querySelectorAll('.images-image');
let sliderLine = document.querySelector('.slider__images');
let nextArrow = document.querySelector('.arrow-next');
let prevArrow = document.querySelector('.arrow-prev');
let productsSrc = [];
let productsStep = 0;
let productsOffset = 0;
let imageWidth = document.querySelector('.images__inner').offsetWidth + 2;

sliderLine.style.width = imageWidth + "px";

for (let i = 0; i < productsImages.length; i++) {
    productsSrc[i] = productsImages[i].src;
    productsImages[i].remove();
};

function productsDraw() {
    let productsImg = document.createElement('img');
    productsImg.src = productsSrc[productsStep];
    productsImg.classList.add('images-image');
    productsImg.style.width = imageWidth + "px";
    sliderLine.appendChild(productsImg);
    sliderLine.style.transform = 'translateX(-' + (productsOffset * imageWidth) + 'px)';
};

function productsNextSlide() {
    productsStep++;
    productsOffset++;
    if (productsStep >= productsImages.length) {
        productsStep = 0;
    }
    if (sliderLine.children.length != productsImages.length) {
        productsDraw();
        setTimeout(() => {
            sliderLine.children[0].remove();
        }, 1000);
        console.log(sliderLine.children[0]);
    }

}

function productsPrevSlide() {
    productsStep++;
    productsOffset--;
    if (productsOffset < 0) {
        productsOffset = sliderLine.children.length;
    }
    productsDraw();
}

productsDraw();

nextArrow.onclick = productsNextSlide;
prevArrow.onclick = () => {
    productsSrc.reverse();
    productsPrevSlide();
};

*,
 ::before,
 ::after {
    box-sizing: border-box;
}

body {
    font-family: 'montserrat', sans-serif;
    margin: 0;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
}

img {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
}

.products {
    padding-top: 70px;
    text-align: left;
    position: relative;
    height: 100%;
    background-color: #fff6e4;
    color: #000;
}

.products__inner {
    padding: 5% 50px;
}

.products__slider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    width: 50px;
    height: 50px;
    background: red;
}

.arrow:last-child {
    margin-left: 20px;
}

.arrow:first-child {
    margin-right: 20px;
    transform: rotate(180deg);
}

.images__inner {
    max-width: 56%;
    border-radius: 13px;
    overflow: hidden;
    background-color: rgba(249, 218, 170, 0.596);
}

.slider__images {
    display: flex;
    align-items: center;
    transition: all .5s;
}

.images-image {
    height: 100%;
}

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>slider</title>
</head>

<body>

    <section class="products">
        <div class="products__inner">
            <div class="products__slider">
                <div class="arrow arrow-prev"></div>
                <div class="images__inner">
                    <div class="slider__images">
                        <img class="images-image active" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                        <img class="images-image" src="https://picsum.photos/200/300" alt="">
                    </div>
                </div>
                <div class="arrow arrow-next"></div>
            </div>
        </div>
    </section>

    <script src="main.js"></script>

</body>

</html>

БЛОГ НА HUSL

Как оптимизировать слайдер?

Ответы (0 шт):