[javascript] jQuery를 활용한 슬라이드 쇼 구현 방법

01 Dec 2023

javascript

이번 포스트에서는 jQuery를 사용하여 웹 페이지에 슬라이드 쇼를 구현하는 방법을 알아보겠습니다. 슬라이드 쇼는 이미지나 콘텐츠를 일정 간격으로 전환하며 사용자에게 시각적인 효과를 제공합니다. jQuery를 사용하면 간편하게 슬라이드 쇼를 구현할 수 있습니다.

HTML 구조

먼저, HTML 구조를 설정해야 합니다. 슬라이드 쇼를 표시할 요소와 이전/다음 버튼 등이 포함된 HTML을 작성합니다. 예를 들어 다음과 같은 구조를 가질 수 있습니다:

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

<button id="prevButton">Previous</button>
<button id="nextButton">Next</button>

위 예시에서, slideshow라는 ID를 가진 div 요소는 슬라이드 쇼를 감싸고 있습니다. 그 아래에는 각각의 이미지를 담은 div 요소를 작성합니다. 또한, 이전과 다음 버튼을 나타내는 버튼 요소도 추가했습니다.

CSS 스타일

다음으로, 슬라이드 쇼에 CSS 스타일을 적용해야 합니다. 슬라이드 쇼는 보기 좋게 꾸며주는 스타일을 추가하여 사용자에게 더 멋진 경험을 제공할 수 있습니다. 예를 들어, 다음과 같이 CSS를 작성할 수 있습니다:

#slideshow {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  display: none;
}

.slide img {
  width: 100%;
  height: 100%;
}

#prevButton,
#nextButton {
  margin-top: 10px;
}

위 CSS 예시에서, slideshow ID를 가진 div 요소에는 너비와 높이, 그리고 overflow: hidden 등의 스타일을 적용합니다. 슬라이드는 각각 너비와 높이가 100%이며 display: none으로 초기에 숨겨져 있습니다. 이미지는 슬라이드와 같은 크기로 표시되도록 스타일을 추가했습니다. 또한 이전과 다음 버튼에는 간격을 조정하기 위해 margin-top 스타일을 적용했습니다.

jQuery로 슬라이드 쇼 구현하기

이제 jQuery를 사용하여 슬라이드 쇼를 구현해보겠습니다. 먼저, jQuery 라이브러리를 HTML 파일에 포함시킵니다:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

그리고 아래의 jQuery 코드를 작성하여 슬라이드 쇼를 구현합니다:

$(document).ready(function() {
  var slides = $(".slide");
  var currentSlide = 0;

  function showSlide() {
    slides.hide();
    slides.eq(currentSlide).fadeIn(500);
  }

  showSlide();

  $("#prevButton").click(function() {
    currentSlide--;
    if (currentSlide < 0) {
      currentSlide = slides.length - 1;
    }
    showSlide();
  });

  $("#nextButton").click(function() {
    currentSlide++;
    if (currentSlide >= slides.length) {
      currentSlide = 0;
    }
    showSlide();
  });
});

위 예시 코드에서 $(document).ready() 함수는 HTML 문서가 로드된 후에 실행됩니다. slides 변수는 모든 슬라이드를 가리키는 jQuery 객체를 저장합니다. currentSlide 변수는 현재 활성화된 슬라이드의 인덱스를 저장합니다.

showSlide() 함수는 슬라이드를 숨긴 후에 현재 슬라이드를 페이드 인하는 역할을 합니다. 이전 버튼과 다음 버튼을 클릭할 때, currentSlide 변수의 값을 증가 또는 감소시킨 다음, showSlide() 함수를 호출하여 해당 슬라이드를 표시합니다. 또한, 처음 슬라이드에서 이전 버튼을 클릭하면 마지막 슬라이드로 이동하고, 마지막 슬라이드에서 다음 버튼을 클릭하면 처음 슬라이드로 이동하는 로직도 추가했습니다.

마치며

이제 위에서 작성한 코드를 웹 페이지에 적용하면, jQuery를 활용한 슬라이드 쇼를 구현할 수 있습니다. 슬라이드 쇼는 웹 페이지에 시각적인 효과를 제공하여 사용자에게 더 흥미로운 경험을 제공합니다. jQuery를 사용하면 쉽게 슬라이드 쇼를 구현할 수 있으므로, 다양한 웹 프로젝트에 활용해보세요.

HTML 구조

CSS 스타일

jQuery로 슬라이드 쇼 구현하기

마치며

참고 자료