코드 질문좀 드릴게요..
본문
좌우로 스크롤 가능한 캐러셀을 만들고 있습니다.
양쪽에 좌우 버튼을 만들고 오른쪽 버튼을 누르면 왼쪽 버튼이 나오게 해놨구요..
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>
답변 1
수정한 코드는 다음과 같습니다.
이유 먼저 설명해드리면 버튼이 움직이는 공간안에 있기 때문에 같이 움직인 겁니다
밖으로 빼야 합니다.
<!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>
아 너무 감사드립니다.
카톡 아이디라도 알려주심 소소하지만 스타벅스 쿠폰이라도 보내드리겠습니다..
또 이런건 마다하지 않죠^^ 는 농담이구요
마음만 받겠습니다. 고맙습니다 ♡
네.. 너무 감사드립니다
답변을 작성하시기 전에 로그인 해주세요.
