Project (09.29) - 사용자가 선택한 지역에 따른 API 사진 좌우 슬라이드

http://apis.data.go.kr/B551011/PhotoGalleryService1/gallerySearchList1?serviceKey=' + API_KEY + '&MobileOS=ETC&MobileApp=AppTest&keyword='+ encodeURIComponent(region) +'&numOfRows=10&pageNo=1'

 

keyword에 popup창에서 지역을 선택한 정보를 encodeURIComponent로 인코딩하여 API 호출 시 문제가 발생하지 않도록 설정할 수 있다!

 

---

받은 지역에 대한 API 사진 가져오기

let images = [];
let currentIndex = 0;

 

API로 가져온 여러 이미지를 배열 images에 저장하고, currentIndex를 통해 현재 표시되는 이미지의 인덱스를 관리

if (imageUrlElements.length > 0) {
            for (let i = 0; i < imageUrlElements.length; i++) {
                images.push(imageUrlElements[i].textContent);
            }
            // 첫 번째 이미지를 표시
            document.getElementById('displayImage').src = images[currentIndex];

// 슬라이드 이미지 변경 함수
function changeSlide(direction) {
    currentIndex += direction;
    if (currentIndex < 0) {
        currentIndex = images.length - 1; // 마지막 이미지로
    } else if (currentIndex >= images.length) {
        currentIndex = 0; // 첫 번째 이미지로
    }
    document.getElementById('displayImage').src = images[currentIndex];
}

// 좌우 버튼 클릭 이벤트
document.getElementById('prevBtn').addEventListener('click', () => changeSlide(-1));
document.getElementById('nextBtn').addEventListener('click', () => changeSlide(1));

 

changeSlide() -> direction 값이 -1일 때는 이전 슬라이드로 이동하고, +1일 때는 다음 슬라이드로 이동 / 슬라이드가 끝에 도달하면 다시 처음으로 순환하도록 설정