이번 포스트에서는 jQuery를 사용하여 간단한 이미지 슬라이더를 만드는 방법을 알아보겠습니다.

HTML 준비하기

먼저 HTML 파일을 열고 이미지 슬라이더를 표시할 <div>와 슬라이드될 이미지들을 담을 <ul>을 작성합니다.

<div id="slider">
  <ul>
    <li><img src="image1.jpg" alt="이미지1"></li>
    <li><img src="image2.jpg" alt="이미지2"></li>
    <li><img src="image3.jpg" alt="이미지3"></li>
  </ul>
</div>

jQuery 스크립트 작성하기

다음으로, jQuery를 사용하여 이미지 슬라이더를 만듭니다. 아래와 같은 스크립트를 <script> 태그 안에 추가합니다.

$(document).ready(function(){
  var interval = 3000; // 이미지 전환 간격 (밀리초)
  var currentImage = 0;
  var images = $('#slider img');
  var imageCount = images.length;

  function changeImage() {
    $(images[currentImage]).fadeOut('fast');
    currentImage = (currentImage + 1) % imageCount;
    $(images[currentImage]).fadeIn('fast');
  }

  images.not(':first').hide(); // 첫 번째 이미지를 제외한 나머지 숨김
  setInterval(changeImage, interval);
});

스타일링

스타일링은 선택 사항이지만, 슬라이더를 보다 세련되게 보이게 하려면 CSS를 사용하여 꾸밀 수 있습니다.

완성!

이제 파일을 저장하고 브라우저에서 열어보세요. 이미지 슬라이더가 작동하는 것을 확인할 수 있을 것입니다!

이렇게 간단한 jQuery 코드로 이미지 슬라이더를 만들 수 있습니다. 만약 더 복잡한 슬라이더를 원한다면, slick과 같은 jQuery 플러그인을 고려해보는 것도 좋을 것입니다.

이것으로 이번 포스트를 마치겠습니다. 감사합니다!