[javascript] jQuery를 사용하여 이미지 슬라이더 만들기

01 Dec 2023

javascript

이미지 슬라이더는 웹 사이트에서 이미지를 자동으로 전환하거나 직접 전환할 수 있게 해주는 유용한 기능입니다. 이번 포스트에서는 jQuery를 사용하여 간단한 이미지 슬라이더를 만드는 방법에 대해 알아보겠습니다.

HTML 구조

먼저, 이미지 슬라이더를 만들기 위해 다음과 같은 HTML 구조를 사용합니다.

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

위의 예시에서는 .slider라는 클래스를 가진 div 요소 안에 이미지들이 들어가게 됩니다.

CSS 스타일링

다음으로, 이미지 슬라이더에 스타일을 적용하기 위해 CSS를 사용합니다. 여기서는 기본적인 스타일링만 적용하도록 하겠습니다.

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

위의 예시에서는 .slider 클래스의 크기를 500px로 설정하고, 이미지들은 가득 차도록 표시하기 위해 object-fit: cover;를 적용했습니다.

jQuery로 이미지 슬라이더 만들기

이제 jQuery를 사용하여 이미지 슬라이더를 만들어 보겠습니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 이미지 슬라이더 시작
  $('.slider img:gt(0)').hide(); // 첫 번째 이미지 이외의 이미지들을 숨김

  setInterval(function() {
    $('.slider img:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
  }, 3000);
});
</script>

위의 코드에서는 $(document).ready() 함수를 사용하여 페이지가 로드된 후 jQuery 코드를 실행하도록 합니다. 그리고 이미지 슬라이더의 동작을 정의하기 위해 setInterval() 함수를 사용합니다. 이 함수는 일정한 시간 간격으로 주어진 코드를 실행하는 역할을 합니다.

위의 예시에서는 3초마다 첫 번째 이미지를 페이드아웃하고, 다음 이미지를 페이드인시킨 후, 첫 번째 이미지를 마지막으로 옮겨주는 동작을 반복합니다.

결과 확인하기

이제 웹 브라우저에서 HTML 파일을 열어 이미지 슬라이더가 제대로 동작하는지 확인해 보세요. 이미지가 일정한 간격으로 전환되는 것을 볼 수 있을 것입니다.

추가적인 개선 사항

이미지 슬라이더를 더욱 향상시키기 위해 다양한 개선 사항을 추가할 수 있습니다. 예를 들어, 슬라이더 컨트롤을 추가하여 사용자가 이미지를 직접 전환할 수 있도록 할 수 있습니다. 또는 이미지가 전환될 때 특정 효과를 적용하는 등의 기능을 추가할 수도 있습니다.

더 자세한 정보를 원한다면 jQuery 공식 문서를 참조하세요.

이상으로 jQuery를 사용하여 이미지 슬라이더를 만드는 방법을 알아보았습니다. 이를 응용하여 다양한 효과를 추가해보세요!