목록으로

코드 질문좀 드릴게요.. 채택완료

김윤한

프로필 보기 이 회원 글보기 이 회원의 댓글보기

1년 전 조회 2,585

답변 1

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

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

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

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

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

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

</p>

<p>  <div class="carousel_container_ad">

        <!-- 캐러셀 항목 추가 -->

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">1, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/4b807161a2061.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/4b807161a2061.jpg"</a> alt="Image 2">

            <div class="carousel_text_box">

                <div class="carousel_text">2, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">3, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">4, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">5, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">6, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">7, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">8, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1">

            <div class="carousel_text_box">

                <div class="carousel_text">9, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div>

            </div>

        </div>

        <div class="carousel_item_ad">

            <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> 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></p>

<p>    <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; /* 경계의 둥근 모서리 설정 */

        }</p>

<p>        .carousel_item_ad {

            display: inline-block; /* 항목을 가로로 나열 */

            width: 104px;

            height: 167px;

            margin: 0 5px; /* 이미지 간 간격 설정 */

            box-sizing: border-box; /* 패딩과 마진을 포함한 박스 크기 계산 */

            vertical-align: top; /* 항목을 위쪽으로 정렬 */

        }</p>

<p>        .carousel_item_ad img {

            height: 104px; /* 이미지 높이를 자동 조절 */

            object-fit: cover; /* 이미지 비율 유지 및 잘림 */

            display: block; /* 여백 없애기 */

            border: 1px solid;

            border-color: #e9e9ec;

            border-radius: 12px 12px 0 0;

        }</p>

<p>        .carousel_text_box {

            height: 54px;

            padding: 8px 10px;

            border: 1px solid;

            border-color: #e9e9ec;

            border-top: 0;

            border-radius: 0 0 12px 12px;

        }</p>

<p>        .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;

        }</p>

<p>        .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; /* 버튼 중앙에 텍스트 수직 정렬 */

        }</p>

<p>        .scroll-button-left {

            left: 0; /* 컨테이너 왼쪽 경계에 맞게 설정 */

        }</p>

<p>        .scroll-button-right {

            right: 0; /* 컨테이너 오른쪽 경계에 맞게 설정 */

        }

    </style></p>

<p>    <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');</p>

<p>            function updateButtons() {

                const scrollLeft = container.scrollLeft;

                const scrollWidth = container.scrollWidth;

                const clientWidth = container.clientWidth;</p>

<p>                // 오른쪽 버튼 활성화/비활성화

                rightButton.style.display = scrollLeft < (scrollWidth - clientWidth) ? 'block' : 'none';

                

                // 왼쪽 버튼 활성화/비활성화

                leftButton.style.display = scrollLeft > 0 ? 'block' : 'none';

            }</p>

<p>            // 초기 버튼 상태 업데이트

            updateButtons();</p>

<p>            // 오른쪽 버튼 클릭 이벤트

            rightButton.addEventListener('click', function() {

                container.scrollBy({ left: 300, behavior: 'smooth' });

                updateButtons();

            });</p>

<p>            // 왼쪽 버튼 클릭 이벤트

            leftButton.addEventListener('click', function() {

                container.scrollBy({ left: -300, behavior: 'smooth' });

                updateButtons();

            });</p>

<p>            // 스크롤 이벤트를 통해 버튼 상태 업데이트

            container.addEventListener('scroll', updateButtons);</p>

<p>            // 이미지 랜덤 정렬

            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]];

                }

            }</p>

<p>            shuffleArray(items);

            items.forEach(item => container.appendChild(item));

        });

    </script></p>

<p>

#그누보드5

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

미니님a

프로필 보기 이 회원 글보기 이 회원의 댓글보기

Expert

1년 전

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

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

밖으로 빼야 합니다.

http://sir.kr/data/editor/2408/978180634_1723612995.0071.gif" width="100%" />

</p>

<p><!DOCTYPE html></p>

<p><html lang="en"></p>

<p><head></p>

<p>    <meta charset="UTF-8"></p>

<p>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>

<p>    <title>Document</title></p>

<p></head></p>

<p><body></p>

<p>    <div class="carousel_container_wrapper"></p>

<p>        <div class="carousel_container_ad"></p>

<p>            <!-- 캐러셀 항목 추가 --></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">1, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/4b807161a2061.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/4b807161a2061.jpg"</a> alt="Image 2"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">2, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">3, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">4, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">5, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">6, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">7, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">8, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">9, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div></p>

<p>            <div class="carousel_item_ad"></p>

<p>                <img src="<a href="https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"" target="_blank" rel="noopener noreferrer">https://cdn.imweb.me/thumbnail/20240812/957949cccdff3.jpg"</a> alt="Image 1"></p>

<p>                <div class="carousel_text_box"></p>

<p>                    <div class="carousel_text">10, 부산장안지구 디에트르 디오션’ 중대형 평형과 최첨단 기술로 차별화</div></p>

<p>                </div></p>

<p>            </div>          </p>

<p>        </div></p>

<p>        <button class="scroll-button scroll-button-left" id="prev-button">◀</button></p>

<p>        <button class="scroll-button scroll-button-right" id="next-button">▶</button></p>

<p>    </div></p>

<p>    <style></p>

<p>         .carousel_container_wrapper {</p>

<p>            position: relative;</p>

<p>            max-width: 800px;</p>

<p>            margin: 0 auto;</p>

<p>        }</p>

<p>        .carousel_container_ad {</p>

<p>            overflow-x: auto; /* 수평 스크롤 가능하게 설정 */</p>

<p>            overflow-y: hidden; /* 수직 스크롤 숨기기 */</p>

<p>            white-space: nowrap; /* 내용이 한 줄로 나열되게 설정 */</p>

<p>            scroll-behavior: smooth; /* 스크롤 부드럽게 */</p>

<p>            padding: 10px 0; /* 위아래 패딩 추가 */</p>

<p>            border: 1px solid #e9e9ec; /* 컨테이너 경계 추가 */</p>

<p>            border-radius: 12px; /* 경계의 둥근 모서리 설정 */</p>

<p>        }</p>

<p>        .carousel_item_ad {</p>

<p>            display: inline-block; /* 항목을 가로로 나열 */</p>

<p>            width: 104px;</p>

<p>            height: 167px;</p>

<p>            margin: 0 5px; /* 이미지 간 간격 설정 */</p>

<p>            box-sizing: border-box; /* 패딩과 마진을 포함한 박스 크기 계산 */</p>

<p>            vertical-align: top; /* 항목을 위쪽으로 정렬 */</p>

<p>        }</p>

<p>        .carousel_item_ad img {</p>

<p>            height: 104px; /* 이미지 높이를 자동 조절 */</p>

<p>            object-fit: cover; /* 이미지 비율 유지 및 잘림 */</p>

<p>            display: block; /* 여백 없애기 */</p>

<p>            border: 1px solid;</p>

<p>            border-color: #e9e9ec;</p>

<p>            border-radius: 12px 12px 0 0;</p>

<p>        }</p>

<p>        .carousel_text_box {</p>

<p>            height: 54px;</p>

<p>            padding: 8px 10px;</p>

<p>            border: 1px solid;</p>

<p>            border-color: #e9e9ec;</p>

<p>            border-top: 0;</p>

<p>            border-radius: 0 0 12px 12px;</p>

<p>        }</p>

<p>        .carousel_text {</p>

<p>            display: -webkit-box;</p>

<p>            overflow: hidden;</p>

<p>            max-height: 56px;</p>

<p>            -webkit-line-clamp: 2;</p>

<p>            -webkit-box-orient: vertical;</p>

<p>            line-height: 18px;</p>

<p>            font-size: 13px;</p>

<p>            word-break: break-all;</p>

<p>            word-wrap: break-word;</p>

<p>            white-space: normal;</p>

<p>        }</p>

<p>        .scroll-button {</p>

<p>            position: absolute;</p>

<p>            top: 50%;</p>

<p>            transform: translateY(-50%);</p>

<p>            background-color: rgba(0, 0, 0, 0.5);</p>

<p>            color: white;</p>

<p>            border: none;</p>

<p>            border-radius: 50%;</p>

<p>            cursor: pointer;</p>

<p>            font-size: 16px;</p>

<p>            z-index: 1; /* 버튼이 다른 내용 위에 보이게 함 */</p>

<p>            width: 40px; /* 버튼 크기 조절 */</p>

<p>            height: 40px; /* 버튼 크기 조절 */</p>

<p>            text-align: center; /* 텍스트 중앙 정렬 */</p>

<p>            line-height: 40px; /* 버튼 중앙에 텍스트 수직 정렬 */</p>

<p>        }</p>

<p>        .scroll-button-left {</p>

<p>            left: -20px; /* 컨테이너 왼쪽 경계에 맞게 설정 */</p>

<p>        }</p>

<p>        .scroll-button-right {</p>

<p>            right: -20px; /* 컨테이너 오른쪽 경계에 맞게 설정 */</p>

<p>        }</p>

<p>    </style></p>

<p>    <script></p>

<p>        document.addEventListener("DOMContentLoaded", function() {</p>

<p>            const container = document.querySelector('.carousel_container_ad');</p>

<p>            const leftButton = document.querySelector('.scroll-button-left');</p>

<p>            const rightButton = document.querySelector('.scroll-button-right');</p>

<p>            function updateButtons() {</p>

<p>                const scrollLeft = container.scrollLeft;</p>

<p>                const scrollWidth = container.scrollWidth;</p>

<p>                const clientWidth = container.clientWidth;</p>

<p>                // 오른쪽 버튼 활성화/비활성화</p>

<p>                rightButton.style.display = scrollLeft < (scrollWidth - clientWidth) ? 'block' : 'none';</p>

<p>               </p>

<p>                // 왼쪽 버튼 활성화/비활성화</p>

<p>                leftButton.style.display = scrollLeft > 0 ? 'block' : 'none';</p>

<p>            }</p>

<p>            // 초기 버튼 상태 업데이트</p>

<p>            updateButtons();</p>

<p>            // 오른쪽 버튼 클릭 이벤트</p>

<p>            rightButton.addEventListener('click', function() {</p>

<p>                container.scrollBy({ left: 300, behavior: 'smooth' });</p>

<p>                updateButtons();</p>

<p>            });</p>

<p>            // 왼쪽 버튼 클릭 이벤트</p>

<p>            leftButton.addEventListener('click', function() {</p>

<p>                container.scrollBy({ left: -300, behavior: 'smooth' });</p>

<p>                updateButtons();</p>

<p>            });</p>

<p>            // 스크롤 이벤트를 통해 버튼 상태 업데이트</p>

<p>            container.addEventListener('scroll', updateButtons);</p>

<p>            // 이미지 랜덤 정렬</p>

<p>            const items = Array.from(container.querySelectorAll('.carousel_item_ad'));</p>

<p>            function shuffleArray(array) {</p>

<p>                for (let i = array.length - 1; i > 0; i--) {</p>

<p>                    const j = Math.floor(Math.random() * (i + 1));</p>

<p>                    [array[i], array[j]] = [array[j], array[i]];</p>

<p>                }</p>

<p>            }</p>

<p>            shuffleArray(items);</p>

<p>            items.forEach(item => container.appendChild(item));</p>

<p>        });</p>

<p>    </script></p>

<p></body></p>

<p></html></p>

<p>

로그인 후 평가할 수 있습니다