자바스크립트에서 JSON 데이터를 이용하여 이미지 슬라이더 생성하기

15 Sep 2023

javascript

이미지 슬라이더는 웹 페이지에서 이미지를 자동으로 슬라이드하거나 사용자 조작에 따라 이동하는 기능을 제공합니다. 이 기능은 웹 애플리케이션에서 많이 사용되며 자바스크립트와 JSON 데이터를 통해 동적으로 생성할 수 있습니다.

1. HTML 구조 만들기

먼저, HTML 파일에 이미지 슬라이더를 표시할 구조를 만듭니다. div 요소 내부에 이미지를 표시할 img 요소를 추가합니다. 또한 이전(previous)과 다음(next) 버튼을 추가하여 사용자가 이미지를 넘기는 기능을 제공합니다.

<div id="slider">
  <img id="image" src="" alt="Image Slider">
  <button id="prev">Previous</button>
  <button id="next">Next</button>
</div>

2. 슬라이더 데이터를 가져오기

다음으로, JSON 데이터를 가져와서 이미지 슬라이더에 표시할 이미지 URL을 추출합니다. 이를 위해 AJAX 요청을 사용하여 서버에서 JSON 데이터를 가져옵니다.

function fetchSliderData() {
  fetch('slider-data.json')
    .then(response => response.json())
    .then(data => {
      // 이미지 슬라이더 생성하기
      createSlider(data);
    })
    .catch(error => {
      console.error(error);
    });
}

3. 이미지 슬라이더 생성하기

JSON 데이터를 기반으로 이미지 슬라이더를 동적으로 생성합니다. 이미지 슬라이더를 생성하기 위해서는 이미지 URL을 각각의 img 요소의 src 속성에 할당해야 합니다.

function createSlider(data) {
  const slider = document.getElementById('slider');
  const image = document.getElementById('image');
  const prevButton = document.getElementById('prev');
  const nextButton = document.getElementById('next');
  let currentIndex = 0;

  // 초기 이미지 표시
  image.setAttribute('src', data[currentIndex]);

  // 이전 버튼 이벤트 처리
  prevButton.addEventListener('click', () => {
    if (currentIndex === 0) {
      currentIndex = data.length - 1;
    } else {
      currentIndex--;
    }
    image.setAttribute('src', data[currentIndex]);
  });

  // 다음 버튼 이벤트 처리
  nextButton.addEventListener('click', () => {
    if (currentIndex === data.length - 1) {
      currentIndex = 0;
    } else {
      currentIndex++;
    }
    image.setAttribute('src', data[currentIndex]);
  });
}

4. JSON 데이터 구조

JSON 데이터는 다음과 같은 구조를 가지고 있어야 합니다. 각 이미지의 URL을 포함하는 배열로 구성됩니다.

[
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
]

5. JSON 데이터 파일 생성

마지막으로, JSON 데이터를 포함하는 파일을 생성합니다. 예를 들어, slider-data.json 파일을 생성하고 위에서 설명한 JSON 데이터 구조로 작성합니다.

[
  "images/image1.jpg",
  "images/image2.jpg",
  "images/image3.jpg"
]

이제 자바스크립트에서 JSON 데이터를 가지고 이미지 슬라이더를 생성할 준비가 되었습니다. fetchSliderData() 함수를 호출하여 이미지 슬라이더를 동적으로 생성하고 JSON 데이터를 가져옵니다.

fetchSliderData();

이렇게 하면 JSON 데이터를 사용하여 이미지 슬라이더를 생성할 수 있습니다. 웹 페이지에서 이 기능을 확인하려면 HTML 파일을 열고 자바스크립트 파일을 실행하면 됩니다.

#javascript #JSON #이미지스라이더