그누보드 QA - 코드 질문좀 드릴게요..

코드 질문좀 드릴게요..

김윤한 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.08.14 13:59:59 조회 1639 (122.♡.♡.241)

본문

좌우로 스크롤 가능한 캐러셀을 만들고 있습니다.

양쪽에 좌우 버튼을 만들고 오른쪽 버튼을 누르면 왼쪽 버튼이 나오게 해놨구요..

carousel_container_ad 컨테이너 양쪽에 버튼을 고정시켜놨는데

그런데 오른쪽 버튼을 누르면 버튼들이 고정이 되지않고 자꾸 이미지를 따라가네요..

어떤 부분을 고쳐야 할지 알려주시면 너무 감사하겠습니다..

사이트는 https://www.reby24.com/291 이거구요. 코드는 아래처럼 되어있습니다.


  <div class="carousel_container_ad">
        <!-- 캐러셀 항목 추가 -->
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">1, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/4b807161a2061.jpg" alt="Image 2">
            <div class="carousel_text_box">
                <div class="carousel_text">2, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">3, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">4, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">5, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">6, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">7, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">8, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">9, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>
        <div class="carousel_item_ad">
            <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
            <div class="carousel_text_box">
                <div class="carousel_text">10, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
            </div>
        </div>          
      </div>
        <button class="scroll-button scroll-button-left" id="prev-button">◀</button>
        <button class="scroll-button scroll-button-right" id="next-button">▶</button>
    </div>
    <style>
        .carousel_container_ad {
            max-width: 800px;
            position: relative;
            overflow-x: auto; /* 수평 스크롤 가능하게 설정 */
            overflow-y: hidden; /* 수직 스크롤 숨기기 */
            white-space: nowrap; /* 내용이 한 줄로 나열되게 설정 */
            scroll-behavior: smooth; /* 스크롤 부드럽게 */
            padding: 10px 0; /* 위아래 패딩 추가 */
            border: 1px solid #e9e9ec; /* 컨테이너 경계 추가 */
            border-radius: 12px; /* 경계의 둥근 모서리 설정 */
        }
        .carousel_item_ad {
            display: inline-block; /* 항목을 가로로 나열 */
            width: 104px;
            height: 167px;
            margin: 0 5px; /* 이미지 간 간격 설정 */
            box-sizing: border-box; /* 패딩과 마진을 포함한 박스 크기 계산 */
            vertical-align: top; /* 항목을 위쪽으로 정렬 */
        }
        .carousel_item_ad img {
            height: 104px; /* 이미지 높이를 자동 조절 */
            object-fit: cover; /* 이미지 비율 유지 및 잘림 */
            display: block; /* 여백 없애기 */
            border: 1px solid;
            border-color: #e9e9ec;
            border-radius: 12px 12px 0 0;
        }
        .carousel_text_box {
            height: 54px;
            padding: 8px 10px;
            border: 1px solid;
            border-color: #e9e9ec;
            border-top: 0;
            border-radius: 0 0 12px 12px;
        }
        .carousel_text {
            display: -webkit-box;
            overflow: hidden;
            max-height: 56px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 18px;
            font-size: 13px;
            word-break: break-all;
            word-wrap: break-word;
            white-space: normal;
        }
        .scroll-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            display: none; /* 숨기기 */
            z-index: 1; /* 버튼이 다른 내용 위에 보이게 함 */
            width: 40px; /* 버튼 크기 조절 */
            height: 40px; /* 버튼 크기 조절 */
            text-align: center; /* 텍스트 중앙 정렬 */
            line-height: 40px; /* 버튼 중앙에 텍스트 수직 정렬 */
        }
        .scroll-button-left {
            left: 0; /* 컨테이너 왼쪽 경계에 맞게 설정 */
        }
        .scroll-button-right {
            right: 0; /* 컨테이너 오른쪽 경계에 맞게 설정 */
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const container = document.querySelector('.carousel_container_ad');
            const leftButton = document.querySelector('.scroll-button-left');
            const rightButton = document.querySelector('.scroll-button-right');
            function updateButtons() {
                const scrollLeft = container.scrollLeft;
                const scrollWidth = container.scrollWidth;
                const clientWidth = container.clientWidth;
                // 오른쪽 버튼 활성화/비활성화
                rightButton.style.display = scrollLeft < (scrollWidth - clientWidth) ? 'block' : 'none';
                
                // 왼쪽 버튼 활성화/비활성화
                leftButton.style.display = scrollLeft > 0 ? 'block' : 'none';
            }
            // 초기 버튼 상태 업데이트
            updateButtons();
            // 오른쪽 버튼 클릭 이벤트
            rightButton.addEventListener('click', function() {
                container.scrollBy({ left: 300, behavior: 'smooth' });
                updateButtons();
            });
            // 왼쪽 버튼 클릭 이벤트
            leftButton.addEventListener('click', function() {
                container.scrollBy({ left: -300, behavior: 'smooth' });
                updateButtons();
            });
            // 스크롤 이벤트를 통해 버튼 상태 업데이트
            container.addEventListener('scroll', updateButtons);
            // 이미지 랜덤 정렬
            const items = Array.from(container.querySelectorAll('.carousel_item_ad'));
            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
            }
            shuffleArray(items);
            items.forEach(item => container.appendChild(item));
        });
    </script>

#그누보드5

답변 1

미니님a 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-08-14 14:23:03 58.♡.♡.26

수정한 코드는 다음과 같습니다.

이유 먼저 설명해드리면 버튼이 움직이는 공간안에 있기 때문에 같이 움직인 겁니다

밖으로 빼야 합니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="carousel_container_wrapper">
        <div class="carousel_container_ad">
            <!-- 캐러셀 항목 추가 -->
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">1, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/4b807161a2061.jpg" alt="Image 2">
                <div class="carousel_text_box">
                    <div class="carousel_text">2, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">3, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">4, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">5, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">6, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">7, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">8, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">9, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>
            <div class="carousel_item_ad">
                <img src="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg" alt="Image 1">
                <div class="carousel_text_box">
                    <div class="carousel_text">10, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>
                </div>
            </div>          
        </div>
        <button class="scroll-button scroll-button-left" id="prev-button">◀</button>
        <button class="scroll-button scroll-button-right" id="next-button">▶</button>
    </div>
    <style>
         .carousel_container_wrapper {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }
        .carousel_container_ad {
            overflow-x: auto; /* 수평 스크롤 가능하게 설정 */
            overflow-y: hidden; /* 수직 스크롤 숨기기 */
            white-space: nowrap; /* 내용이 한 줄로 나열되게 설정 */
            scroll-behavior: smooth; /* 스크롤 부드럽게 */
            padding: 10px 0; /* 위아래 패딩 추가 */
            border: 1px solid #e9e9ec; /* 컨테이너 경계 추가 */
            border-radius: 12px; /* 경계의 둥근 모서리 설정 */
        }
        .carousel_item_ad {
            display: inline-block; /* 항목을 가로로 나열 */
            width: 104px;
            height: 167px;
            margin: 0 5px; /* 이미지 간 간격 설정 */
            box-sizing: border-box; /* 패딩과 마진을 포함한 박스 크기 계산 */
            vertical-align: top; /* 항목을 위쪽으로 정렬 */
        }
        .carousel_item_ad img {
            height: 104px; /* 이미지 높이를 자동 조절 */
            object-fit: cover; /* 이미지 비율 유지 및 잘림 */
            display: block; /* 여백 없애기 */
            border: 1px solid;
            border-color: #e9e9ec;
            border-radius: 12px 12px 0 0;
        }
        .carousel_text_box {
            height: 54px;
            padding: 8px 10px;
            border: 1px solid;
            border-color: #e9e9ec;
            border-top: 0;
            border-radius: 0 0 12px 12px;
        }
        .carousel_text {
            display: -webkit-box;
            overflow: hidden;
            max-height: 56px;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 18px;
            font-size: 13px;
            word-break: break-all;
            word-wrap: break-word;
            white-space: normal;
        }
        .scroll-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            z-index: 1; /* 버튼이 다른 내용 위에 보이게 함 */
            width: 40px; /* 버튼 크기 조절 */
            height: 40px; /* 버튼 크기 조절 */
            text-align: center; /* 텍스트 중앙 정렬 */
            line-height: 40px; /* 버튼 중앙에 텍스트 수직 정렬 */
        }
        .scroll-button-left {
            left: -20px; /* 컨테이너 왼쪽 경계에 맞게 설정 */
        }
        .scroll-button-right {
            right: -20px; /* 컨테이너 오른쪽 경계에 맞게 설정 */
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const container = document.querySelector('.carousel_container_ad');
            const leftButton = document.querySelector('.scroll-button-left');
            const rightButton = document.querySelector('.scroll-button-right');
            function updateButtons() {
                const scrollLeft = container.scrollLeft;
                const scrollWidth = container.scrollWidth;
                const clientWidth = container.clientWidth;
                // 오른쪽 버튼 활성화/비활성화
                rightButton.style.display = scrollLeft < (scrollWidth - clientWidth) ? 'block' : 'none';
               
                // 왼쪽 버튼 활성화/비활성화
                leftButton.style.display = scrollLeft > 0 ? 'block' : 'none';
            }
            // 초기 버튼 상태 업데이트
            updateButtons();
            // 오른쪽 버튼 클릭 이벤트
            rightButton.addEventListener('click', function() {
                container.scrollBy({ left: 300, behavior: 'smooth' });
                updateButtons();
            });
            // 왼쪽 버튼 클릭 이벤트
            leftButton.addEventListener('click', function() {
                container.scrollBy({ left: -300, behavior: 'smooth' });
                updateButtons();
            });
            // 스크롤 이벤트를 통해 버튼 상태 업데이트
            container.addEventListener('scroll', updateButtons);
            // 이미지 랜덤 정렬
            const items = Array.from(container.querySelectorAll('.carousel_item_ad'));
            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
            }
            shuffleArray(items);
            items.forEach(item => container.appendChild(item));
        });
    </script>
</body>
</html>