Vue에서 Swiper 옵션 바인딩으로 정리하기

Vue에서 Swiper 옵션 바인딩으로 정리하기

 

https://swiperjs.com/demos#autoplay

Swiper Demos

 

Swiper 공식 사이트의 demos를 보면 옵션들을 <swiper>태그 안에다가 덕지덕지 끼워넣는 모습을 볼 수 있습니다.

그런데 옵션이 많아지다보면 코드가 매우 길어지고, 같은 옵션을 다른 슬라이드에 적용할 때도 중복이 발생하여 불편합니다.

<template>
  <!-- 옵션 지저분 -->
  <swiper
    :spaceBetween="30"
    :centeredSlides="true"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :pagination="{
      clickable: true,
    }"
    :navigation="true"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script>
// 여기선 swiper6 방식 사용중. swiper7 이상은 import 방식 다름
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.min.css";

import SwiperCore, { Pagination, Navigation, Autoplay } from "swiper";
SwiperCore.use([ Pagination, Navigation, Autoplay ]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
}
</script>

 

Vue에서는 이 긴 옵션들을 바인딩하여 코드의 가독성을 높히고, 더 나아가 여러 슬라이드에 같은 옵션을 줄 수 있습니다.

방법은 간단합니다. 옵션들을 data 인스턴스에 객체형태로 집어넣고, 그 객체형태의 옵션을 swiper 태그에 바인딩해주면 끝입니다.

<template>
  <!-- 옵션 바인딩 -->
  <swiper v-bind="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
  <!-- 다른 슬라이드에도 간단히 적용 -->
  <swiper v-bind="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script>
// 여기선 swiper6 방식 사용중. swiper7 이상은 import 방식 다름
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.min.css";

import SwiperCore, { Pagination, Navigation, Autoplay } from "swiper";
SwiperCore.use([ Pagination, Navigation, Autoplay ]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption : {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          clickable: true,
        },
        navigation: true,
      }
    }
  }
}
</script>

 

이 포스팅이 여러분이 코딩할 때 쓸모가 있었으면 좋겠네요 :)

swiper7 이상을 사용하시더라도 바인딩 하는 방법은 똑같습니다. 만약 swiper7이상에서의 import 방식이 궁금하시면 https://bellmir.tistory.com/34를 참고해주세요.