본문 바로가기
Today I Learned/JS

[JS] swiper.js - 에이블런 프론트엔드부트캠프 17일차

by YES_developNewbie 2024. 8. 6.

swiper js는 반응형 슬라이드 쇼와 스와이프 기능을 쉽게 구현할 수 있게 해주는 js 라이브러리이다. 다양한 슬라이드들이 존재하지만 그 중 몇가지만 설명해보겠다.

0. CDN 설정

아래 코드를 HTML 헤드에 작성한다.

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

1. Navigation

HTML에 navigation swiper에 필요한 요소들을 작성해준다. 슬라이드들을 작성하고 마지막에 이전과 다음 버튼을 작성한다.

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <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-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

 

크게 보기 위해 전체를 감싸는 .swiper에 fullscreen을 작성해주고 슬라이드 정렬을 위해 .swiper-slide에 display: flex를 적용시켜주었다.

    .swiper {
      width: 100%;
      height: 100vh;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

 

마지막으로 JS에 swiper initalize를 해준다. navigation 키값에 이전, 다음 버튼을 정의해준다.

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

 

 

Navigation

2. Pagination

HTML에 navigation swiper에 필요한 요소들을 작성해준다. 슬라이드들을 작성하고 마지막에 pagination class를 작성한다.

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <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-pagination"></div>
  </div>

 

JS에서 swiper initalize를 해준다. pagination 키값에 element로 pagination class를 넣어준다.

    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });

 

 

3. Centered Auto

HTML에 navigation swiper에 필요한 요소들을 작성해준다. 슬라이드들을 작성하고 마지막에 pagination class를 작성한다.

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <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-pagination"></div>
  </div>

 

기능이 제대로 작동하는지 확인하기 위해 슬라이드들의 크기를 변화시켜줬다.

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide {
      width: 60%;
    }

    .swiper-slide:nth-child(2n) {
      width: 40%;
    }

    .swiper-slide:nth-child(3n) {
      width: 20%;
    }

 

JS에서는 swiper initalize를 해주었다. pagination 키값에 element로 pagination class를 지정해주고 클릭 여부를 true로 설정했다.

    var swiper = new Swiper(".mySwiper", {
      slidesPerView: "auto", // 한 번에 보여지는 슬라이드 개수
      centeredSlides: true, // 활성 슬라이드 중앙 배치 여부
      spaceBetween: 30, // 슬라이드 사이 여백
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

 

 

4. Infinite loop

HTML에 navigation swiper에 필요한 요소들을 작성해준다. 슬라이드들을 작성하고 마지막에 이전, 다음버튼 그리고 pagination class를 작성한다.

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <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-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>

 

JS에서는 swiper initalize를 해주었다. loop를 true로 작성해 무한 반복이 되도록 구현했다.

 

var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1, // 한 번에 보여지는 슬라이드 개수
      spaceBetween: 30, // 슬라이드 간 여백
      loop: true, // 반복 여부
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

 

 

 

5. coverflow

HTML에 navigation swiper에 필요한 요소들을 작성해준다. 슬라이드들을 작성하고 슬라이드에 이미지를 넣어준다.

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

 

이미지가 삐져나가지 않게 이미지 태그 스타일링을 해준다.

    .swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }

 

swiper에 이펙트명을 coverflow로 지정하고 coverflowEffect 속성을 지정해주었다.

    var swiper = new Swiper(".mySwiper", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50, // 슬라이드 회전각
        stretch: 0, // 슬라이드 간 거리
        depth: 100, // 깊이
        modifier: 1, // 효과 배수
        slideShadows: true, // 슬라이드 그림자
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });

 

 

 

6. Effect cards

슬라이드들을 작성해주었다.

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <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>

 

슬라이드들을 구별하기 위해 각각의 색상을 지정해주었다.

    .swiper {
      width: 240px;
      height: 320px;
    }

    .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }

    .swiper-slide:nth-child(1n) {
      background-color: rgb(206, 17, 17);
    }

    .swiper-slide:nth-child(2n) {
      background-color: rgb(0, 140, 255);
    }

    .swiper-slide:nth-child(3n) {
      background-color: rgb(10, 184, 111);
    }

    .swiper-slide:nth-child(4n) {
      background-color: rgb(211, 122, 7);
    }

    .swiper-slide:nth-child(5n) {
      background-color: rgb(118, 163, 12);
    }

    .swiper-slide:nth-child(6n) {
      background-color: rgb(180, 10, 47);
    }

    .swiper-slide:nth-child(7n) {
      background-color: rgb(35, 99, 19);
    }

    .swiper-slide:nth-child(8n) {
      background-color: rgb(0, 68, 255);
    }

    .swiper-slide:nth-child(9n) {
      background-color: rgb(218, 12, 218);
    }

    .swiper-slide:nth-child(10n) {
      background-color: rgb(54, 94, 77);
    }

 

이펙트명을 cards로 지정해주었다.

    var swiper = new Swiper(".mySwiper", {
      effect: "cards",
      grabCursor: true,
    });

 

 

 

'Today I Learned > JS' 카테고리의 다른 글

[JS] Kakao Map - 에이블런 프론트엔드부트캠프 18일차  (0) 2024.08.08
[JS] 동적으로 HTML 구성 - 에이블런 프론트엔드부트캠프 17일차  (0) 2024.08.07
[JS] isotope.js - 에이블런 프론트엔드부트캠프 16일차  (0) 2024.08.06
[JS] 버블링 & 캡처링 - 프엔부캠 심화학습  (0) 2024.07.31
[JS] JS 4 - 에이블런 프론트엔드부트캠프 13일차  (0) 2024.07.31

관련글

티스토리툴바