[JS] Swiper

김재우·2023년 11월 25일

JS

목록 보기

1/4

📚Swiper 사용법

🔎 Swiper 라이브러리 설정

swiper 기능을 사용하기 위해서 초기에 설정을 해야합니다.

swiper 사이트

공식 사이트에서 swiper 사용하는 방법을 정리해놨는데,
저는 CDN 방식을 사용했습니다.
head 태그에 공식 사이트에서 제공한 link 태그와 script 태그를
하나씩 넣어주면 됩니다.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<head>

CDN방식으로 설정해놨다면 기본적인 HTML의 <body>태그에 기본적인 구조를 작성해줍니다.

<body>
  <div class="swiper">
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      ...
    </div>
    
    <!-- 이전, 다음 버튼-->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  
  </div> 
</body>

이후에 JS 파일을 연결해서 Swiper 기능들을 사용해봅시다.

🔎기본적인 슬라이드 효과

new Swiper('.swiper');

new Swiper('.swiper', {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
});

🔎다중 슬라이드 효과

var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

✍ 여러가지 기본적으로 구현할 수 있는 예제들이 있어서 프로젝트를 만들때 유용하게 swiper 기능들을 사용할 수 있을 것 같습니다.

김재우

프론트엔드 개발자를 꿈꾸는 사람

다음 포스트

[JS] Swiper

JS

📚Swiper 사용법

🔎 Swiper 라이브러리 설정

🔎기본적인 슬라이드 효과

🔎Navigation 슬라이드 효과

🔎다중 슬라이드 효과

[JS] 기본 문법

0개의 댓글