[javascript] Multiple Carousels

1. HTML

<div class="main-image-area js-product-carousel">
    <div class="carousel_view">
        <span class="carousel_control js-carousel-prev">previous</span>
        <span href="#" class="carousel_control js-carousel-next">next</span>
        <ul class="product-list js-product-list">
            <li class="contents-all-detail product-list_item">
                <div data-slide="1" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="1" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="2" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="3" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="4" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="5" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="6" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
            <li class="contents-all-detail product-list_item">
                <div data-slide="7" class="product">
                    <div class="main-image-content">
                        <img src="../assets/images/thumbnail.png" alt="Manifest">
                    </div>
                    <div class="thumb-item-label">Manifest</div>
                </div>
            </li>
        </ul>
    </div>
</div>

 

2. CSS

.carousel_view{width: 100%; height: 31rem; margin: auto; position: relative; display: flex;}
.carousel_control{position: absolute; z-index: 1; height: 31rem; width: 4rem; background-color: rgba(221, 221, 221, 0.5); display: table; display: none;}
.carousel_control:first-of-type{left: 0;}
.carousel_control:last-of-type{right: 0;}
.product-list{position: absolute; margin: 0; padding: 0; display: flex; transition: transform 0.3s; transform: translateX(0px); list-style: none;}
.product-list_item{width: 38.4rem; height: 100%; display: inline-block; margin-right: 1.8rem;}
.product{display: table; height: 100%; width: 100%;}

 

3. JS

(function () {
        var carousels = document.querySelectorAll(".js-product-carousel");

        [].forEach.call(carousels, function (carousel) {
            carouselize(carousel);
        });
    })();

    function carouselize(carousel) {
        var productList = carousel.querySelector(".js-product-list");
        var productListWidth = 0;
        var productListSteps = 0;
        var products = carousel.querySelectorAll(".product");
        var productAmount = 0;
        var productAmountVisible = 4;
        var carouselPrev = carousel.querySelector(".js-carousel-prev");
        var carouselNext = carousel.querySelector(".js-carousel-next");

        //Count all the products
        [].forEach.call(products, function (product) {
            productAmount++;
            productListWidth += 402;
            productList.style.width = productListWidth + "px";
        });

        carouselNext.onclick = function () {
            // alert('a');
            if (productListSteps < productAmount - productAmountVisible) {
                productListSteps++;
                moveProductList();
            }
        };
        carouselPrev.onclick = function () {
            // alert('a');
            if (productListSteps > 0) {
                productListSteps--;
                moveProductList();
            }
        };

        function moveProductList() {
            productList.style.transform =
                "translateX(-" + 402 * productListSteps + "px)";
            }
        }


        window.addEventListener('keydown', function(event) {
            console.log(event.keyCode);
                console.log(event.key); 
                //37 왼
                //39 오
        });


        $(document).keydown(function(event) {
            if (event.which == 37) { // 왼쪽 화살표 키 눌렸을 때
                moveCarousel(1);
            } else if (event.which == 39) { // 오른쪽 화살표 키 눌렸을 때
                moveCarousel(-1);
            }
        });

        function moveCarousel(direction) {
            var carousel = $(".js-product-carousel");
            var productList = carousel.find(".js-product-list");
            var productWidth = 402; // 각 상품 항목의 폭에 맞게 조절해주세요.
            var currentPosition = parseInt(productList.css("left")) || 0;

            // 이동 방향에 따라 새로운 위치 계산
            var newPosition = currentPosition + direction * productWidth;

            // 이동 가능한지 확인 후 이동
            if (newPosition <= 0 && newPosition >= -(productWidth * (productList.children().length - 4))) {
                productList.animate({
                    left: newPosition
                });
            }
        }