코드 질문좀 드릴게요.. 채택완료
김윤한
1년 전
조회 2,582
좌우로 스크롤 가능한 캐러셀을 만들고 있습니다.
양쪽에 좌우 버튼을 만들고 오른쪽 버튼을 누르면 왼쪽 버튼이 나오게 해놨구요..
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>
댓글을 작성하려면 로그인이 필요합니다.
답변 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>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
김윤한
1년 전
�
미니님a
1년 전
또 이런건 마다하지 않죠^^ 는 농담이구요
마음만 받겠습니다. 고맙습니다 ♡
마음만 받겠습니다. 고맙습니다 ♡
�
김윤한
1년 전
네.. 너무 감사드립니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
카톡 아이디라도 알려주심 소소하지만 스타벅스 쿠폰이라도 보내드리겠습니다..