Jae Front-end Study

결과 화면

버전

vue: 2.7.10

nuxt: 2.15.8

vue, nuxt 버전 2.x.x 기준으로 작성한 글이기 때문에 버전  3.x.x에서는 동작하지 않을 수 있다.

2023.11 기준 스와이퍼 버전 11까지 나왔다.

최신 버전의 뷰 스와이퍼에 대한 자세한 설명은 공식 문서를 참고한다.

https://swiperjs.com/vue

1. swiper, vue-awesome-swiper 패키기 설치하기

swiper와 vue-awesome-swiper 패키지를 설치한다.

반드시 해당 버전으로 설치한다.

yarn add swiper@5.4.5
yarn add vue-awesome-swiper@4.1.1

또는

npm install swiper@5.4.5
npm install vue-awesome-swiper@4.1.1

2. Swiper, SwiperSlide 컴포넌트 사용하기

• pages/swiper.vue

1. Swiper, SwiperSlide 컴포넌트를 import 한다.
2. swiper.css를 import 한다.
3. <Swiper>와 <SwiperSlier> 컴포넌트를 사용해 마크업을 한다.
   이때 prev, next 버튼과 페이지네이션은 <Swiper> 컴포넌트 밖에 작성한다. (안에 있으면 SwiperSlide와 같이 움직이기 때문에 밖으로 뺀다.)
4. kvSwiperOptions을 작성한다.
   가장 많이 사용하는 속성은 slidesPerView(슬라이드가 몇 개씩 노출되는지), spaceBetween(슬라이드 간의 간격)이고, 이외의 다양한 속성들은 공식 문서를 참고한다. (https://swiperjs.com/demos)
5. swiper.css는 기본적인 스타일만 제공하기 때문에 크기, 배경, 글자, 위치 등은 css를 추가로 작성한다.

<template>
  <section class="kv-swiper">
    <Swiper :options="kvSwiperOptions">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </section>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'SwiperPage',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      kvSwiperOptions: {
        slidesPerView: 2,
        spaceBetween: 20,
        loop: true,
        navigation: {
          prevEl: '.swiper-button-prev',
          nextEl: '.swiper-button-next'
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.kv-swiper {
  position: relative;
  height: 300px;

  .swiper-container {
    height: 100%;

    .swiper-slide {
      ...
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    &::after {
      color: #333;
    }
  }

  .swiper-pagination::v-deep {
    bottom: -30px;
    width: 100%;

    .swiper-pagination-bullet {
      margin: 0 5px;
      cursor: pointer;
    }

    .swiper-pagination-bullet-active {
      background-color: #333;
    }
  }
}
</style>