如何在同一页面上多次添加相同的轮播？

Question

我是网络新手，我想在同一个页面上多次使用这个 javascript 代码来处理多个轮播，但它只适用于第一个轮播，我尝试更改名称但没有帮助！

这是js代码：

    const slider = document.querySelector('.items');
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
    });
    slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
    });
    slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 1; //scroll-fast
        slider.scrollLeft = scrollLeft - walk;
        console.log(walk);
    });

这是 html，只是为了让您了解我缩短的名称并删除所有项目，以便您可以更快地阅读它，如果您想运行它，您应该添加 8 个或更多项目：

<div id="main">
    <div class="carousel__container">
        <main class="grid-item main">
            <div class="items">
                <div class="item item1">
                    <div class="carousel-item">
                        <img class="carousel-item__img" src=" " alt="img">
                        <div class="panel1 ">
                            <a href="# " class="far fa-bookmark "></a>
                        </div>
                        <div class="info ">
                            <a>
                                <h3>writer : </h3>
                            </a>
                            <a>
                                <h3>name : </h3>
                            </a>
                            <a>
                                <h3>price : </h3>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
    </div>
</div>
</div>

和css：

    .carousel {
        margin: 5px;
        width: 100%;
        overflow: scroll;
        position: relative;
        box-shadow: border-box;
    }
    
    .carousel__container {
        white-space: nowrap;
        margin: 40px 0px;
        padding-bottom: 10px;
    }
    
    .carousel-item {
        background: rgb(136, 129, 116);
        width: 190px;
        height: auto;
        border-radius: 20px;
        overflow: hidden;
        margin-right: 10px;
        display: inline-block;
        cursor: pointer;
        transition: 450ms all;
        transform-origin: center left;
        position: relative;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.26);
    }
    
    .carousel-item .panel1 {
        position: absolute;
        top: 0;
        right: -50%;
        width: 45px;
        background-color: transparent;
        display: flex;
        align-items: center;
        flex-flow: column;
        opacity: 1;
    }
    
    .carousel-item:hover .panel1 {
        right: 0;
        opacity: 1;
        transition: 0.4s;
    }
    
    .carousel-item .panel1 a {
        font-size: 20px;
        color: #dbd6d0;
        margin: 15px 0;
    }
    
    .carousel-item .panel1 a:hover {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-item .info {
        text-align: center;
        line-height: 20px;
        margin-top: -10px;
        font-family: 'Amita', cursive;
        margin-bottom: 10px;
    }
    
    .carousel-item .info h3 {
        color: #333;
        padding-top: 8px;
        cursor: pointer;
        font-family: danstevis;
        letter-spacing: 1px;
        font-size: 14px;
    }
    
    .carousel-item~.carousel-item {
        transform: translate3d(20px, 0, 0);
    }
    
    .carousel__container:hover .carousel-item:hover {
        transform: scale(1.09);
        opacity: 1;
    }
    
    .carousel-item__img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: 0 0.5px 0.5px 0 rgba(0, 0, 0, 0.26);
    }
    
    .carousel__container:hover .carousel-fitem:hover {
        transform: scale(1.09);
        opacity: 1;
    }
    
    .items::-webkit-scrollbar {
        height: 15px;
    }
    
    .items::-webkit-scrollbar-track {
        -webkit-box: inset 0 0 6px rgba(0, 0, 0, 0.26);
        border-radius: 10px;
    }
    
    .items::-webkit-scrollbar-track-piece {
        max-width: 100px;
    }
    
    .items::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background-color: #fff;
        background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#dbc9a827), to(#968a753b), color-stop(0.6, #9482672c));
    }
    
    .carousel::-webkit-scrollbar {
        display: none;
    }
    
    @supports(display: grid) {
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto 1fr auto;
        }
        .items {
            position: relative;
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            transition: all 0.20s;
            transform: scale(0.98);
            will-change: transform;
            user-select: none;
            cursor: pointer;
        }
        .items.active {
            background: rgba(255, 255, 255, 0.281);
            cursor: grabbing;
            cursor: -webkit-grabbing;
            transform: scale(1);
        }
        .item {
            display: inline-block;
            background: rgb(255, 255, 255);
            min-height: 300px;
            min-width: 100px;
            margin: 2em 1em;
        }
    }

Answer 1

您在轮播中创建了几个项目：

 <div class="carousel-item">
                    <img class="carousel-item__img" src=" " alt="img">
                    <div class="panel1 ">
                        <a href="# " class="far fa-bookmark "></a>
                    </div>

之后，很大程度上取决于您想要的展示位置