대충 이미지 추가 눌러서 사진 업로드하는 기능인데 분명히 포스터 하나를 넣었는데 저렇게 화면 크기에 맞춰서 3개가 붙어서 나옵니다.
모바일 버전으로 보면 화면이 아래로 길어진거에 맞춰서 나옵니다.
웹페이지의 경우 최대 크기 700*400에 맞춰서 그림을 꽉채우고
화면이 작아지면 화면 크기에 맞춰 ???*400에 맞춰서 그림을 채워버립니다.
높이 400은 고정인걸 보면 분명 어디 설정하는 부분이 있는 것 같은데, 못찾는 난감한 상황입니다...
<div class="image-slider">
<button type="button" id="prevBtn" class="slider-btn"><</button>
<div id="carouselImages">
</div>
<button type="button" id="nextBtn" class="slider-btn">></button>
</div>
<input type="file" id="fileUpload" name="fileUpload" multiple style="display: none;">
<button type="button" id="addImageBtn" class="add-image-btn">이미지 추가</button>
<button type="button" id="prevBtn" class="slider-btn"><</button>
<div id="carouselImages">
</div>
<button type="button" id="nextBtn" class="slider-btn">></button>
</div>
<input type="file" id="fileUpload" name="fileUpload" multiple style="display: none;">
<button type="button" id="addImageBtn" class="add-image-btn">이미지 추가</button>
html부분은 이렇게 단순하게 이미지 추가 버튼 + 보여주는 부분이고
여기가 js부분인데 이부분을 긁어온거라 어디서 문제인지 모르겠습니다...
let uploadedFiles = [];
const addImageBtn = document.getElementById("addImageBtn");
const fileUpload = document.getElementById("fileUpload");
const carouselImages = document.getElementById("carouselImages");
addImageBtn.addEventListener("click", () => {
fileUpload.click();
});
const addImageBtn = document.getElementById("addImageBtn");
const fileUpload = document.getElementById("fileUpload");
const carouselImages = document.getElementById("carouselImages");
addImageBtn.addEventListener("click", () => {
fileUpload.click();
});
fileUpload.addEventListener("change", (event) => {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
let reader = new FileReader();
uploadedFiles.push(files[i]);
const newImageDiv = document.createElement("div");
newImageDiv.className = "slide";
if (carouselImages.childElementCount === 0) {
newImageDiv.classList.add("active");
}
reader.onload = (e) => {
newImageDiv.style.backgroundImage = `url(${e.target.result})`;
carouselImages.appendChild(newImageDiv);
}
reader.readAsDataURL(files[i]);
}
fileUpload.value = ""; // 파일 선택 초기화
});
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
let reader = new FileReader();
uploadedFiles.push(files[i]);
const newImageDiv = document.createElement("div");
newImageDiv.className = "slide";
if (carouselImages.childElementCount === 0) {
newImageDiv.classList.add("active");
}
reader.onload = (e) => {
newImageDiv.style.backgroundImage = `url(${e.target.result})`;
carouselImages.appendChild(newImageDiv);
}
reader.readAsDataURL(files[i]);
}
fileUpload.value = ""; // 파일 선택 초기화
});
여기부분이 대충 파일을 쪼개서 업로드해서 배열하는 느낌인데 여기서 뭐를 건드려야 사진이 여러개 겹쳐지지 않고 하나만 나오게될까요?
도움부탁드립니다...
