Swiper js 고급 기능

Swiper는 다양한 고급 기능을 지원하여 복잡한 슬라이더와 캐러셀을 생성할 수 있습니다. 주요 고급 기능들은 다음과 같습니다:

1. 레이지 로딩 (Lazy Loading)

레이지 로딩은 스크롤할 때만 이미지를 로드하여 성능을 향상시킵니다.

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  lazy: true, // 레이지 로딩 활성화
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

HTML 구조에서 이미지 태그에 swiper-lazy 클래스를 추가합니다:

<div class="swiper-slide">
  <img class="swiper-lazy" data-src="image.jpg" alt="Image">
  <div class="swiper-lazy-preloader"></div>
</div>

2. 가상 슬라이드 (Virtual Slides)

가상 슬라이드는 대량의 슬라이드를 효율적으로 처리할 수 있게 도와줍니다. 슬라이드가 실제로 DOM에 추가되지 않고, Swiper가 내부적으로 관리합니다.

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  virtual: {
    slides: Array.from({ length: 1000 }, (_, i) => `Slide ${i + 1}`),
  },
});

3. 패럴럭스 효과 (Parallax Effect)

패럴럭스 효과는 배경 이미지와 내용이 다른 속도로 스크롤되어 시각적으로 깊이를 줍니다.

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  parallax: true, // 패럴럭스 효과 활성화
  on: {
    init: function () {
      this.el.querySelector('.swiper-slide').setAttribute('data-swiper-parallax', '100');
    },
  },
});

HTML 구조에서 슬라이드에 data-swiper-parallax 속성을 추가합니다:

<div class="swiper-slide" data-swiper-parallax="-200">
  <div class="swiper-slide-bg" style="background-image:url('background.jpg');"></div>
</div>

4. 비디오 플레이어 (Video Player)

슬라이드 내에 비디오를 넣어 자동 재생 또는 사용자 상호작용에 따라 비디오를 재생할 수 있습니다.

<div class="swiper-slide">
  <video class="swiper-video" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

5. 슬라이드 전환 효과 (Slide Transition Effects)

Swiper는 다양한 전환 효과를 제공합니다. 대표적인 전환 효과는 fade, cube, coverflow 등입니다.

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  effect: 'fade', // 슬라이드 전환 효과 설정
  fadeEffect: {
    crossFade: true, // 페이드 효과에서 교차 페이드 활성화
  },
});

6. 내비게이션 및 페이지네이션 커스터마이즈

내비게이션 버튼과 페이지네이션을 사용자 정의 스타일로 변경할 수 있습니다.

css로 커스터마이즈:

.swiper-button-next {
  background-color: #fff; /* 다음 버튼 배경색 */
}

.swiper-button-prev {
  background-color: #fff; /* 이전 버튼 배경색 */
}

.swiper-pagination-bullet {
  background: #000; /* 페이지네이션 불릿 색상 */
}

7. 리액트 및 Vue와의 통합

Swiper는 리액트와 Vue.js와의 통합을 위한 공식 컴포넌트를 제공합니다.

리액트 예시:

npm install swiper@latest react-id-swiper

import React from 'react';
import Swiper from 'react-id-swiper';
import 'swiper/swiper-bundle.min.css';

const MySwiper = () => {
  const params = {
    slidesPerView: 1,
    spaceBetween: 10,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  };

  return (
    <Swiper {...params}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </Swiper>
  );
};

export default MySwiper;

Vue.js 예시:

npm install swiper@latest vue-awesome-swiper

<template>
  <swiper :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script>
import { Swiper as SwiperClass, Pagination, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.min.css';

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      swiperOptions: {
        modules: [Pagination, Navigation],
        slidesPerView: 1,
        spaceBetween: 10,
        pagination: { clickable: true },
        navigation: true,
      },
    };
  },
};
</script>

이 외에도 Swiper는 많은 기능과 옵션을 제공합니다. 자세한 내용은 Swiper 공식 문서를 참고하세요.