js左右点击滑动思路

<div id="slider-container">
    <button id="left-btn">左</button>
    <div id="slider" style="width: 300px; overflow: hidden;">
        <div id="slider-content" style="width: 1000px; display: flex;">
            <div style="width: 100px; height: 100px; background-color: red;"></div>
            <div style="width: 100px; height: 100px; background-color: green;"></div>
            <div style="width: 100px; height: 100px; background-color: blue;"></div>
            <!-- 更多滑动项 -->
        </div>
    </div>
    <button id="right-btn">右</button>
</div>

document.addEventListener('DOMContentLoaded', function() {
    const sliderContent = document.getElementById('slider-content');
    const leftBtn = document.getElementById('left-btn');
    const rightBtn = document.getElementById('right-btn');
    let currentPosition = 0;
    const slideWidth = 100; // 每个滑动项的宽度

    leftBtn.addEventListener('click', function() {
        if (currentPosition < 0) {
            currentPosition += slideWidth;
            sliderContent.style.transform = `translateX(${currentPosition}px)`;
        }
    });

    rightBtn.addEventListener('click', function() {
        if (currentPosition > -(sliderContent.children.length - 3) * slideWidth) {
            currentPosition -= slideWidth;
            sliderContent.style.transform = `translateX(${currentPosition}px)`;
        }
    });
});