[javascript] Parcel에서 이미지 슬라이더를 구현하는 방법은?

22 Nov 2023

javascript

Parcel 프로젝트 생성: 먼저 새로운 Parcel 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행합니다:

mkdir image-slider
cd image-slider
npm init -y
npm install parcel-bundler --save-dev

이미지 슬라이더 패키지 설치: 이미지 슬라이더 기능을 제공하는 패키지를 설치합니다. 대표적인 패키지로는 Slick이 있습니다. 다음 명령어로 패키지를 설치합니다:

npm install slick-carousel --save

HTML 및 CSS 작성: index.html 파일을 생성하고 다음과 같이 작성합니다:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
</head>
<body>
  <div class="slider">
    <div><img src="image1.jpg"></div>
    <div><img src="image2.jpg"></div>
    <div><img src="image3.jpg"></div>
  </div>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/slick-carousel/slick/slick.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.slider').slick();
    });
  </script>
</body>
</html>

슬라이더 추가 설정: 위의 코드에서 이미지의 경로와 슬라이더 옵션을 구성할 수 있습니다. 자세한 옵션은 Slick 공식 문서를 참조하세요.
애플리케이션 빌드: 터미널에서 다음 명령어를 실행하여 애플리케이션을 빌드하고 로컬 서버에서 실행합니다:

npx parcel index.html

이제 이미지 슬라이더를 구현하는 데 필요한 단계를 모두 완료했습니다. Parcel과 Slick을 사용하여 이미지 슬라이더를 쉽게 구현할 수 있습니다.